import React, { useContext } from "react";
import {
  Box,
  Input,
  Select,
  Textarea,
  FormControl,
  FormLabel,
  FormErrorMessage,
} from "@chakra-ui/react";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useParams } from "react-router-dom";

const FormField = ({ field, register, errors }) => {
  const { label, name, type, placeHolder, options, width } = field;

  return (
    <Box width={width}>
      <FormControl isInvalid={errors[name]}>
        <FormLabel fontSize={"sm"} fontWeight={"400"}>
          {label}
        </FormLabel>
        {type === "text" && (
          <Input
            placeholder={placeHolder}
            {...register(name, { required: true })}
          />
        )}
        {type === "textarea" && (
          <Textarea
            placeholder={placeHolder}
            {...register(name, { required: true })}
          />
        )}
        {type === "number" && (
          <Input
            type="number"
            placeholder={placeHolder}
            {...register(name, { required: true })}
          />
        )}
        {type === "date" && (
          <Input
            type="date"
            placeholder={placeHolder}
            {...register(name, { required: true })}
          />
        )}
        {type === "select" && (
          <Select
            placeholder={placeHolder}
            {...register(name, { required: true })}
          >
            {options.map((option, index) => (
              <option key={index} value={option.value}>
                {option.label}
              </option>
            ))}
          </Select>
        )}
        <FormErrorMessage>
          {errors[name] && `${label} is required`}
        </FormErrorMessage>
      </FormControl>
    </Box>
  );
};

export default FormField;
