import React from "react";
import FormInputMain from "../../../Components/FormInputMain";
import { useNavigate } from "react-router-dom";

const IODetails = ({ enableNextTab, control, errors, index, handleSubmit }) => {
  const navigate = useNavigate()
  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 groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
      groups[section] = [];
    }
    groups[section].push(field);
    return groups;
  }, {});


  const onSubmit = (e) =>{
    e.preventDefault();
    enableNextTab(index)
  }


  return (
    <FormInputMain
      p={0.1}
      w={'auto'}
      width={"23.8%"}
      groupedFields={groupedFields}
      control={control}
      errors={errors}
      // onSubmit={handleSubmit(onSubmit)}
      
      onSubmit={onSubmit}
      submitTitle={"Next"}
    />
  );
};

export default IODetails;