import {
  Box,
  Button,
  Container,
  FormLabel,
  Heading,
  Input,
  VStack,
} from '@chakra-ui/react'; // Importing Chakra UI components for layout and styling
import React, { useState } from 'react'; // Importing React and useState hook
import { useDispatch } from 'react-redux'; // For accessing Redux dispatch function
import { Link } from 'react-router-dom'; // For navigation using React Router
import { login } from '../../redux/actions/user'; // Importing login action

// Login component for user authentication
const Login = () => {
  const [email, setEmail] = useState(''); // State to hold email input
  const [password, setPassword] = useState(''); // State to hold password input

  const dispatch = useDispatch(); // Hook to access the dispatch function

  // Handler for form submission
  const submitHandler = e => {
    e.preventDefault(); // Prevent default form submission behavior
    dispatch(login(email, password)); // Dispatch login action with email and password
  };

  return (
    <Container h={'95vh'}> {/* Container for the entire login form */}
      <VStack h={'full'} justifyContent="center" spacing={'16'}> {/* Vertical stack for centering the content */}
        <Heading children={'Welcome to Learnx '} /> {/* Welcome heading */}

        <form onSubmit={submitHandler} style={{ width: '100%' }}> {/* Form element */}
          <Box my={'4'}> {/* Box for email input */}
            <FormLabel htmlFor="email" children="Email Address" /> {/* Label for email input */}
            <Input
              required // Email input is required
              id="email" // HTML id for the input
              value={email} // Controlled input value
              onChange={e => setEmail(e.target.value)} // Update email state on change
              placeholder="abc@gmail.com" // Placeholder text
              type={'email'} // Input type for email
              focusBorderColor="yellow.500" // Border color on focus
            />
          </Box>

          <Box my={'4'}> {/* Box for password input */}
            <FormLabel htmlFor="password" children="Password" /> {/* Label for password input */}
            <Input
              required // Password input is required
              id="password" // HTML id for the input
              value={password} // Controlled input value
              onChange={e => setPassword(e.target.value)} // Update password state on change
              placeholder="Enter Your Password" // Placeholder text
              type={'password'} // Input type for password
              focusBorderColor="yellow.500" // Border color on focus
            />
          </Box>

          <Box> {/* Box for the forgot password link */}
            <Link to="/forgetpassword"> {/* Link to the forget password page */}
              <Button fontSize={'sm'} variant="link"> {/* Link styled as a button */}
                Forget Password?
              </Button>
            </Link>
          </Box>

          <Button my="4" colorScheme={'yellow'} type="submit"> {/* Submit button for login */}
            Login
          </Button>

          <Box my="4"> {/* Box for sign-up link */}
            New User?{' '} {/* Text for new users */}
            <Link to="/register"> {/* Link to the registration page */}
              <Button colorScheme={'yellow'} variant="link"> {/* Link styled as a button */}
                Sign Up
              </Button>{' '}
              here
            </Link>
          </Box>
        </form>
      </VStack>
    </Container>
  );
};

export default Login; // Exporting Login component