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";
import { useParams } from "react-router-dom";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
import UnderConstruction from "../../UnderConstruction";
import Destribution from "./Destribution";

const CreateIO = () => {
  const id = useParams()?.id;
  const { data, error, isLoading } = useGetIOprepopulateDataQuery();

  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: id ? false : false,
    },
    {
      label: "Investment documents",
      Content: InvestmentDocument,
      isDisabled: id ? true : true,
    },
    {
      label: "Key merits",
      Content: KeyMerits,
      isDisabled: id ? true : true,
    },
    {
      label: "IO artifacts",
      Content: IOArtifacts,
      isDisabled: id ? true : true,
    },
    {
      label: "Investors",
      Content: Investors,
      // Content: UnderConstruction,
      isDisabled: id ? true : true,
    },
    {
      label: "IO Cash Detail",
      Content: IOCashDetails,
      isDisabled: id ? true : true,
    },
    {
      label: "IO NAV Details",
      Content: IONAVDetails,
      isDisabled: id ? true : true,
    },
    {
      label: "Distribution to Investors",
      Content: Destribution,
      isDisabled: id ? true : true,
    },
  ];

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

  return isLoading ? (
    <FullscreenLoaders />
  ) : (
    <Box
      {...OPACITY_ON_LOAD}
      w={"100%"}
      overflowY={"scroll"}
      overflowX={"hidden"}
      height={"100vh"}
      pb={10}
    >
      {id && <Box 
      ps={1}
      pe={2} mt={2}>
        {/* <span
          onClick={() => navigate(-1)}
          style={{ fontSize: "15px", cursor: "pointer" }}
        >
          <ArrowBackIcon cursor={"pointer"} /> Back
        </span> */}
        <ViewIOdataHeader isLoading={isLoading} data={data?.data} />
      </Box>}
      <Tabs
        index={activeIndex}
        onChange={(index) => setActiveIndex(index)}
        mt={2}
        ps={1}
        pe={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} data={data?.data} />
            </TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Box>
  );
};

export default CreateIO;