import {
  Box,
  Button,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import FormInputMain from "../../../Components/FormInputMain";
import FormField from "./EditIOForm";

const EditIO = ({ isOpen, onClose }) => {
    
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({
    defaultValues: {
      ioName: "",
      ioNameArabic: "",
      description: "",
      descriptionArabic: "",
      typeName: "",
      typeNameArabic: "",
      sponserName: "",
      sponserNameArabic: "",
      goalAmount: 0,
      minInvestment: 0,
      maxInvestment: 0,
      holdingPeriod: 0,
      expectedReturn: 0,
      closingDate: "",
      ioStatus: "",
    },
  });

  const formFields = [
    {
      label: "IO Name (English)",
      placeHolder: " ",
      name: "ioName",
      type: "text",

      section: " ",
      width: "49%",
    },
    {
      label: "IO Name (Arabic)",
      placeHolder: " ",
      name: "ioNameArabic",
      type: "text",

      section: " ",
      width: "49%",
    },
    {
      label: "Description (English)",
      placeHolder: " ",
      name: "discription",
      type: "textarea",

      section: " ",
      width: "49%",
    },
    {
      label: "Description (Arabic)",
      placeHolder: " ",
      name: "discriptionArabic",
      type: "textarea",

      section: " ",
      width: "49%",
    },
    {
      label: "Investment Type (English)",
      placeHolder: " ",
      name: "typeName",
      type: "select",

      section: " ",
      width: "49%",
      options: [
        {
          label: "option 1",
          value: "option 1",
        },
        {
          label: "option 2",
          value: "option 2",
        },
        {
          label: "option 3",
          value: "option 3",
        },
        {
          label: "option 4",
          value: "option 4",
        },
      ],
    },
    {
      label: "Investment Type (Arabic)",
      placeHolder: " ",
      name: "typeNameArabic",
      type: "select",

      section: " ",
      width: "49%",
      options: [
        {
          label: "option 1",
          value: "option 1",
        },
        {
          label: "option 2",
          value: "option 2",
        },
        {
          label: "option 3",
          value: "option 3",
        },
        {
          label: "option 4",
          value: "option 4",
        },
      ],
    },
    {
      label: "Sponser Name (English)",
      placeHolder: " ",
      name: "sponserName",
      type: "text",

      section: " ",
      width: "49%",
    },
    {
      label: "Sponser Name (Arabic)",
      placeHolder: " ",
      name: "sponserNameArabic",
      type: "text",

      section: " ",
      width: "49%",
    },
    {
      label: "Goal Amount (English)",
      placeHolder: " ",
      name: "goalAmount",
      type: "Number",

      section: " ",
      width: "49%",
    },
    {
      label: "Minimum Investment Amount (English)",
      placeHolder: " ",
      name: "minInvestment",
      type: "number",

      section: " ",
      width: "32.3%",
    },
    {
      label: "Maximum Investment Amount (English)",
      placeHolder: " ",
      name: "maxInvestment",
      type: "number",

      section: " ",
      width: "32.3%",
    },
    {
      label: "Holding Period (English)",
      placeHolder: " ",
      name: "holdingPeriod",
      type: "number",

      section: " ",
      width: "32.3%",
    },
    {
      label: "Expected Return Estimated (English)",
      placeHolder: " ",
      name: "expectedReturn",
      type: "number",

      section: " ",
      width: "32.3%",
    },
    {
      label: "Closing Date (English)",
      placeHolder: " ",
      name: "closingDate",
      type: "date",

      section: " ",
      width: "32.3%",
    },
    {
      label: "IO status",
      placeHolder: " ",
      name: "ioStatus",
      type: "select",

      section: " ",
      width: "32.3%",
      options: [
        {
          label: "option 1",
          value: "option 1",
        },
        {
          label: "option 2",
          value: "option 2",
        },
        {
          label: "option 3",
          value: "option 3",
        },
        {
          label: "option 4",
          value: "option 4",
        },
      ],
    },
  ];

  const onSubmit = (data) => {
    // Handle form submission
    onClose();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent maxW={"1280px"}>
        <ModalHeader>Update IO Status</ModalHeader>
        <ModalCloseButton />
        <ModalBody paddingBottom={"20px"}>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Box display={"flex"} flexWrap={"wrap"} gap={2}>
              {formFields.map((field, index) => (
                <FormField
                  key={index}
                  field={field}
                  register={register}
                  errors={errors}
                />
              ))}
            </Box>
            <Box display={"flex"} justifyContent={"end"} mt={4}>
              <Button
                bg={"hsla(139, 100%, 14%, 1)"}
                mr={3}
                type="submit"
                color={"#fff"}
                _hover={{
                  bg: "hsl(139deg 98.99% 26.59%)",
                }}
              >
                Save
              </Button>
              <Button onClick={onClose}>Close</Button>
            </Box>
          </form>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
};

export default EditIO;
