Register.jsx

import {
  Avatar,
  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 { register } from '../../redux/actions/user'; // Importing register action

// Custom styles for file upload button
export const fileUploadCss = {
  cursor: 'pointer', // Change cursor to pointer
  marginLeft: '-5%', // Adjust margin for styling
  width: '110%', // Set width to 110%
  border: 'none', // No border
  height: '100%', // Full height
  color: '#ECC94B', // Text color
  backgroundColor: 'white', // Background color
};

// Styles for the file input
const fileUploadStyle = {
  '&::file-selector-button': fileUploadCss, // Apply custom styles to file selector button
};

// Register component for user registration
const Register = () => {
  // State to hold user input
  const [email, setEmail] = useState(''); // State for email
  const [name, setName] = useState(''); // State for name
  const [password, setPassword] = useState(''); // State for password
  const [imagePrev, setImagePrev] = useState(''); // State for image preview
  const [image, setImage] = useState(''); // State for the image file

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

  // Handler for image file selection
  const changeImageHandler = e => {
    const file = e.target.files[0]; // Get the selected file
    const reader = new FileReader(); // Create a FileReader instance

    reader.readAsDataURL(file); // Read the file as a data URL

    // Once the file is loaded, update the preview and state
    reader.onloadend = () => {
      setImagePrev(reader.result); // Set the image preview
      setImage(file); // Set the image file
    };
  };

  // Handler for form submission
  const submitHandler = e => {
    e.preventDefault(); // Prevent default form submission behavior
    const myForm = new FormData(); // Create a new FormData object

    // Append user details to the form
    myForm.append('name', name);
    myForm.append('email', email);
    myForm.append('password', password);
    myForm.append('file', image); // Append image file

    dispatch(register(myForm)); // Dispatch the register action with form data
  };

  return (
    <Container h={'95vh'}> {/* Container for the registration form */}
      <VStack h={'full'} justifyContent="center" spacing={'16'}> {/* Vertical stack for centering the content */}
        <Heading textTransform={'uppercase'} children={'Registration'} /> {/* Registration heading */}

        <form onSubmit={submitHandler} style={{ width: '100%' }}> {/* Form element */}
          <Box my="4" display={'flex'} justifyContent="center"> {/* Box for avatar display */}
            <Avatar src={imagePrev} size={'2xl'} /> {/* Avatar component to show image preview */}
          </Box>

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

          <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="[e-mail]" // 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 my={'4'}> {/* Box for file input */}
            <FormLabel htmlFor="chooseAvatar" children="Choose Avatar" /> {/* Label for file input */}
            <Input
              accept="image/*" // Accept only image files
              required // File input is required
              id="chooseAvatar" // HTML id for the input
              type={'file'} // Input type for file
              focusBorderColor="yellow.500" // Border color on focus
              css={fileUploadStyle} // Apply custom file upload styles
              onChange={changeImageHandler} // Handler for file input change
            />
          </Box>

          <Button my="4" colorScheme={'yellow'} type="submit"> {/* Submit button for registration */}
            Sign Up
          </Button>

          <Box my="4"> {/* Box for sign-up prompt */}
            Already Signed Up?{' '} {/* Text for existing users */}
            <Link to="/login"> {/* Link to the login page */}
              <Button colorScheme={'yellow'} variant="link"> {/* Link styled as a button */}
                Login
              </Button>{' '}
              here
            </Link>
          </Box>
        </form>
      </VStack>
    </Container>
  );
};

export default Register; // Exporting Register component