tanami-admin-panel/src/Pages/IO_Management/CreateIO/CreateIO.jsx

import React, { useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import {
  Box,
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import IODetails from "./IODetails";
import KeyMerits from "./KeyMerits";
import IOArtifacts from "./IOArtifacts";
import Investors from "./Investors";
import IOCashDetails from "./IOCashDetails";
import IONAVDetails from "./IONAVDetails";
import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";

const schema = yup.object().shape({
  ioName: yup.string().required("IO name english is required"),
  ioNameArabic: yup.string().required("IO name arabic  is required"),
  discription: yup.string().required("Discription in english is required"),
  discriptionArabic: yup.string().required("Discription in Arabic is required"),
  typeName: yup.string().required("Investment type in english is required"),
  typeNameArabic: yup.string().required("Investment type in arabic is required"),
  sponserName: yup.string().required("Sponser name is required"),
  sponserNameArabic: yup
    .string()
    .required("Sponser name arabic is required"),
    goalAmount: yup.string().required("Goal amount is required"),
    


  holdingPeriod: yup.string().required("Sponser name is required"),
  ioStatus: yup.string().required("Investment Object name is required"),
  ioStartusArabic: yup.string().required("Sponser name is required"),
  closingDate: yup.string().required("Investment Object name is required"),
  minInvestment: yup.string().required("Sponser name is required"),
  maxInvestment: yup.string().required("Arabic name is required"),
  expectedReturn: yup.string().required("Investment Object name is required"),
  originalValue: yup.string().required("Sponser name is required"),
  keyname: yup.string().required("Arabic name is required"),
  keyNameArabic: yup.string().required("Investment Object name is required"),
  keyDescription: yup.string().required("Sponser name is required"),
  keyDescriptionArabic: yup.string().required("Sponser name is required"),
  docType: yup.string().required("Sponser name is required"),
  destributedAmount: yup
    .number()
    .required("Distributed Amount is required")
    .positive("Must be a positive number"),
  year: yup.string().required("Year is required"),
  tenure: yup
    .number()
    .required("Tenure is required")
    .positive("Must be a positive number"),
  annualReturn: yup
    .number()
    .required("Annual Return is required")
    .positive("Must be a positive number"),
  miniInvest: yup
    .number()
    .required("Minimum Invest is required")
    .positive("Must be a positive number"),
  quaterly: yup.string().required("Quaterly is required"),
  targetClose: yup.date().required("Target close date is required"),
  annualyield: yup
    .number()
    .required("Annual Yield is required")
    .positive("Must be a positive number"),
  iconUpload: yup.mixed().required("Profile image is required"),
  bannerImages: yup.mixed().required("Profile image is required"),
  otherImage: yup.mixed().required("Profile image is required"),
  docAttach: yup.mixed().required("Profile image is required"),
  videos: yup.mixed().required("Profile image is required"),
});

const CreateIO = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  const enableNextTab = (index) => {
    setTabs((prevTabs) => {
      const newTabs = [...prevTabs];
      if (index < newTabs.length - 1) {
        newTabs[index + 1].isDisabled = false;
        setActiveIndex(index + 1); // Switch to the next tab
      }
      return newTabs;
    });
  };

  const initialTabsState = [
    {
      label: "IO Details",
      Content: IODetails,
      isDisabled: false,
    },
    {
      label: "Investment documents",
      Content: InvestmentDocument,
      isDisabled: true,
    },
    {
      label: "Key merits",
      Content: KeyMerits,
      isDisabled: true,
    },
    {
      label: "IO artifacts",
      Content: IOArtifacts,
      isDisabled: true,
    },
    {
      label: "Investors",
      Content: Investors,
      isDisabled: false,
    },
    {
      label: "IO Cash Details",
      Content: IOCashDetails,
      isDisabled: false,
    },
    {
      label: "IO NAV Details",
      Content: IONAVDetails,
      isDisabled: false,
    },
  ];

  const [tabs, setTabs] = useState(initialTabsState);
  const [activeIndex, setActiveIndex] = useState(0);



  const onSubmit = (data) => {
    data.preventDefault();
    enableNextTab(0);
  };

  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
      <Box paddingInline={"12px"} mt={2}>
        {/* <span
          onClick={() => navigate(-1)}
          style={{ fontSize: "15px", cursor: "pointer" }}
        >
          <ArrowBackIcon cursor={"pointer"} /> Back
        </span> */}
        <ViewIOdataHeader />
      </Box>
      <Tabs index={activeIndex} onChange={(index) => setActiveIndex(index)} mt={2}>
        <TabList>
          {tabs.map(({ label, isDisabled }, index) => (
            <Tab
              isDisabled={isDisabled}
              key={index}
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              {label}
            </Tab>
          ))}
        </TabList>

        <TabPanels>
          {tabs.map(({ Content }, index) => (
            <TabPanel key={index}>
              <Content index={index} enableNextTab={enableNextTab} control={control} errors={errors} handleSubmit={handleSubmit} />
            </TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Box>
  );
};

export default CreateIO;