import { Button, Container, Heading, Input, VStack } from '@chakra-ui/react'; // Importing Chakra UI components
import React, { useState } from 'react'; // Importing React and useState hook
import { useEffect } from 'react'; // Importing useEffect hook
import toast from 'react-hot-toast'; // For toast notifications
import { useDispatch, useSelector } from 'react-redux'; // For accessing Redux store
import { forgetPassword } from '../../redux/actions/profile'; // Action to handle password reset

// ForgetPassword component for user to request a password reset
const ForgetPassword = () => {
  const [email, setEmail] = useState(''); // State to hold the email input

  // Extracting loading state, message, and error from the Redux store
  const { loading, message, error } = useSelector(state => state.profile);

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

  // Handler for form submission
  const submitHandler = e => {
    e.preventDefault(); // Prevent default form submission behavior
    dispatch(forgetPassword(email)); // Dispatch action to send reset link
  };

  // useEffect to handle errors and messages from the Redux store
  useEffect(() => {
    if (error) {
      toast.error(error); // Show error notification
      dispatch({ type: 'clearError' }); // Clear error from Redux store
    }
    if (message) {
      toast.success(message); // Show success notification
      dispatch({ type: 'clearMessage' }); // Clear message from Redux store
    }
  }, [dispatch, error, message]); // Dependencies for useEffect

  return (
    <Container py={'16'} h="90vh"> // Container for the form
      <form onSubmit={submitHandler}> // Form element
        <Heading
          children="Forget Password" // Title of the form
          my="16" // Margin top and bottom
          textTransform={'uppercase'} // Uppercase text
          textAlign={['center', 'left']} // Responsive text alignment
        />

        <VStack spacing={'8'}> // Vertical stack for spacing
          <Input
            required // Input is required
            value={email} // Controlled input value
            onChange={e => setEmail(e.target.value)} // Update state on change
            placeholder="abc@gmail.com" // Placeholder text
            type={'email'} // Email input type
            focusBorderColor="yellow.500" // Border color on focus
          />

          <Button
            isLoading={loading} // Show loading spinner if loading
            type="submit" // Submit button type
            w={'full'} // Full width button
            colorScheme="yellow" // Button color scheme
          >
            Send Reset Link // Button text
          </Button>
        </VStack>
      </form>
    </Container>
  );
};

export default ForgetPassword; // Exporting ForgetPassword component