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/IOCashDetails";
import IONAVDetails from "../CreateIO/IONAVDetails";


const ViewIOdata = () => {
  const params = useParams()
  const { isOpen, onOpen, onClose } = useDisclosure();
  const navigate = useNavigate();
  const [isEditing, setIsEditing] = useState(false);


  const tabs = [
    { label: "IO Details", content: <ViewIOdetails /> },
    { label: "Investment documents", content: <InvestmentDocument /> },
    { label: "Key merits", content: <KeyMerits /> },
    { label: "IO artifacts", content: <IOArtifacts /> },
    { label: "Investors", content: <Investors /> },
    { label: "IO Cash Details", content: <IOCashDetails /> },
    { label: "IO NAV Details", content: <IONAVDetails /> },
    // { label: "Distribution", content: <ViewDistribution /> },
  ];

  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} 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
              disabled={true}
              key={index}
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              {label}
            </Tab>
          ))}
          </Box>
        </TabList>
        <TabPanels>
          {tabs.map(({ content }, index) => (
            <TabPanel key={index}>{content}</TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Box>
  );
};

export default ViewIOdata;