import { Button, Container, Heading, Input, VStack } from '@chakra-ui/react'; // Chakra UI components for layout and styling
import React, { useState } from 'react'; // React and hooks
import { useDispatch, useSelector } from 'react-redux'; // For Redux state management
import { useNavigate } from 'react-router-dom'; // For navigation
import { updateProfile } from '../../redux/actions/profile'; // Action to update profile
import { loadUser } from '../../redux/actions/user'; // Action to load user data

const UpdateProfile = ({ user }) => {
  const [name, setName] = useState(user.name); // State for name input
  const [email, setEmail] = useState(user.email); // State for email input

  const navigate = useNavigate(); // Hook for navigation
  const dispatch = useDispatch(); // Hook to dispatch actions

  // Handler to submit the form
  const submitHandler = async e => {
    e.preventDefault(); // Prevent default form submission
    await dispatch(updateProfile(name, email)); // Dispatch update profile action
    dispatch(loadUser()); // Reload user data
    navigate('/profile'); // Navigate to profile page after updating
  };

  const { loading } = useSelector(state => state.profile); // Loading state from profile

  return (
    <Container py="16" minH={'90vh'}> {/* Main container with padding and min height */}
      <form onSubmit={submitHandler}> {/* Form to update profile */}
        <Heading
          textTransform={'uppercase'}
          children="Update Profile" // Heading for the form
          my="16" // Margin on the Y-axis
          textAlign={['center', 'left']} // Text alignment
        />

        <VStack spacing={'8'}> {/* Vertical stack for form elements */}
          <Input
            value={name} // Controlled input for name
            onChange={e => setName(e.target.value)} // Update name state on change
            placeholder="Name" // Placeholder text
            type={'text'} // Input type
            focusBorderColor="yellow.500" // Border color on focus
          />{' '}
          <Input
            value={email} // Controlled input for email
            onChange={e => setEmail(e.target.value)} // Update email state on change
            placeholder="Email" // Placeholder text
            type={'email'} // Input type
            focusBorderColor="yellow.500" // Border color on focus
          />
          <Button
            isLoading={loading} // Show loading state while updating
            w="full" // Full width button
            colorScheme={'yellow'} // Button color scheme
            type="submit" // Submit button
          >
            Update
          </Button>
        </VStack>
      </form>
    </Container>
  );
};

export default UpdateProfile;