import { alpha, Box, Button, IconButton, InputAdornment, Paper, Slide, Stack, TextField, Typography } from '@mui/material';
import React, { useEffect } from 'react';

import MidnightForestOne from '../assets/backgrounds/midnight-forest4.jpg';

import SignIn from '@/components/auth/SignIn';
import SignUp from '@/components/auth/SignUp';
import AuthorizeApp from '@/components/auth/AuthorizeApp';
import { useSession } from '@/contexts/AuthContext';

const AuthorizeScreen = () => {
  const { user } = useSession();

  const [canChangePage, setCanChangePage] = React.useState(true);
  const [page, setPage] = React.useState<'signin' | 'signup' | 'providers'>('signin');

  const handleChangePage = (page: 'signin' | 'signup' | 'providers' = 'providers') => {
    if (!canChangePage) return;
    setPage(page);
  }

  useEffect(() => {
    let wheelTimeout: NodeJS.Timeout | null = null;

    const handleWheel = (event: { deltaY: number; }) => {
      if(!canChangePage) return;
      if (wheelTimeout) {
        clearTimeout(wheelTimeout);
      }

      wheelTimeout = setTimeout(() => {
        if (event.deltaY < 0) {
          if (page === 'signin') {
            setPage('signup');
          } else if (page === 'providers') {
            setPage('signin');
          }
        } else { // Scrolling down
          if (page === 'signin') {
            setPage('providers');
          } else if (page === 'signup') {
            setPage('signin');
          }
        }
      }, 250);
    };

    // Add event listener for wheel event
    window.addEventListener('wheel', handleWheel);

    // Cleanup event listener on component unmount
    return () => {
      if (wheelTimeout) {
        clearTimeout(wheelTimeout);
      }
      window.removeEventListener('wheel', handleWheel);
    };
  }, [page]);

  return (
    <Box sx={{
      height: '100vh',
      width: '100vw',
      backgroundImage: `url(${MidnightForestOne})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
    }}>
      <Box sx={{
        position: 'absolute',
        top: 22,
        width: '100vw',
        height: 100,
        background: 'linear-gradient(180deg, rgba(20,26,33,1) 15%, rgba(0,0,0,0) 100%)',
      }} />
      <Paper sx={{
        height: 1,
        width: 1,
        display: 'flex',
        justifyContent: 'flex-start',
        alignItems: 'center',
        minWidth: 500,
        background: `linear-gradient(80deg, rgba(20,26,33,1) 28%, rgba(11,14,18,0.8253676470588236) 70%, rgba(0,0,0,0) 100%),
          linear-gradient(171deg, rgba(20,26,33,1) 0%, rgba(0,0,0,0) 100%);`
      }}>
        <SignIn {...{ page, handleChangePage }} />
        <SignUp {...{ page, handleChangePage, setCanChangePage }} />
        <AuthorizeApp {...{ page, handleChangePage }} />
      </Paper>
    </Box>
  )
}

export default AuthorizeScreen