import {
  Box,
  Button,
  Input,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
  useDisclosure,
} from "@chakra-ui/react";
import { useNavigate, useParams } from "react-router-dom";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext, useEffect, useState } from "react";
import FormInputView from "../../../Components/FormInputView";
import { useForm } from "react-hook-form"; // assuming react-hook-form is used
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { ArrowBackIcon } from "@chakra-ui/icons";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ViewIOdataHeader from "./ViewIOdataHeader";
import ViewIOdetails from "./ViewIOdetails";
import ViewIOdocs from "./ViewIOdocs";
import ViewKeyMerits from "./ViewKeyMerits";
import ViewIOartifacts from "./ViewIOartifacts";
import ViewInvestors from "./ViewInvestors";
import ViewIOcash from "./ViewIOcash";
import ViewIOnav from "./ViewIOnav";
import ViewDistribution from "./ViewDistribution";
import InvestmentDocument from "../CreateIO/InvestmentDocument";
import KeyMerits from "../CreateIO/KeyMerits";
import Investors from "../CreateIO/Investors";
import EditIO from "../EditIO/EditIO";
import IOArtifacts from "../CreateIO/IOArtifacts";
// import IOCashDetails from "../CreateIO/IOCashDetailsold";
// import IONAVDetails from "../CreateIO/IONAVDetailsOld";
import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
import UnderConstruction from "../../UnderConstruction";
import Destribution from "../CreateIO/Destribution";
import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
import { GoDotFill } from "react-icons/go";

const ViewIOdata = () => {
  const params = useParams();
  const id = params?.id;
  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const navigate = useNavigate();
  const [isEditing, setIsEditing] = useState(false);
  const { IODetails, setIODetails } = useContext(GlobalStateContext);
  console.log(IODetails?.isInvestedAmount); 

  const tabs = [
    { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
    {
      label: "Investment documents", 
      content: <InvestmentDocument data={data?.data} />,
    },
    { label: "Key merits", content: <KeyMerits data={data?.data} /> },
    { label: "IO artifacts", content: <IOArtifacts data={data?.data} /> },
    { label: "Investors", content: <Investors data={data?.data} /> },
    // { label: "Investors", content: <UnderConstruction h={'75vh'}  /> },
    { label: "IO Cash Details", content: <IOCashDetails data={data?.data} /> },
    { label: "IO NAV Details", content: <IONAVDetails data={data?.data} /> },
    {
      label: "Distribution to Investors",
      content: <Destribution data={data?.data} />,
    },
    {
      label: "IO Transaction",
      content: <IOTransaction data={data?.data} />,
    },
    // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
  ];

  
  console.log(IODetails?.ioNAVHistory);
  

  return (
    <Box
      {...OPACITY_ON_LOAD}
      overflowY={"scroll"}
      overflowX={"hidden"}
      height={"100vh"}
      pb={14}
    >
      <Box paddingInline={"12px"} mt={2}>
        {/* <span
          onClick={() => navigate(-1)}
          style={{ fontSize: "15px", cursor: "pointer" }}
        >
          <ArrowBackIcon cursor={"pointer"} /> Back
        </span> */}
        <ViewIOdataHeader />
      </Box>

      <Tabs mt={4}>
        <TabList justifyContent={"space-between"} pe={4} alignItems={"center"}>
          <Box display={"flex"}>
            {tabs.map(({ label }, index) => (
              <Tab
                px={3}
                isDisabled={
                  index === 0 ||
                  index === 1 ||
                  index === 2 ||
                  index === 3 ||
                  index === 4 ||
                  index === 8
                    ? false
                    : !IODetails?.isInvestedAmount
                }
                
                // isDisabled={
                //   index === 0 ||
                //   index === 1 ||
                //   index === 2 ||
                //   index === 3 ||
                //   index === 4
                //     ? false
                //     : !IODetails?.isInvestedAmount
                // }
                key={index}
                fontSize={"xs"}
                _selected={{
                  color: "#004118",
                  borderBottom: "2px solid #38a169",
                }}
                fontWeight={500}
                position={"relative"}
              >
                {label} {index === 5 &&IODetails?.ioCashStatusHistory?.Pending?.length !== 0||
                  index === 6  && IODetails?.ioNAVStatusHistory?.Pending?.length !== 0 ||
                  index === 8 && IODetails?.ioTransactionRecords?.Pending?.length !== 0 ? <Box as="span" right={0} color={"forestGreen"} top={1} position={"absolute"}><GoDotFill /></Box>:""}
              </Tab>
            ))}
          </Box>
        </TabList>
        <TabPanels>
          {tabs.map(({ content }, index) => (
            <TabPanel key={index}>{content}</TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Box>
  );
};

export default ViewIOdata;