import {
  Box,
  Button,
  Input,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
} 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 DataTable from "../../Components/DataTable/DataTable";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import FormInputMain from "../../Components/FormInputMain";
import InvestmentDocuments from "./InvestmentDocuments";
import ViewIOdataHeader from "./ViewIOdataHeader";

const ViewIOdata = () => {
  const navigate = useNavigate();
  const params = useParams();
  const { viewIO } = useContext(GlobalStateContext);
  const { reset } = useForm(); // assuming react-hook-form



  const id = params?.id;
  const foundObject = viewIO.find(
    (item) => item?.id.toString() === id.toString()
  );

  if (!foundObject) {
    return <Box>Loading...</Box>;
  }

  const formFields = [
    {
      label: "IO Name (English)",
      value: foundObject.DealName,
      width: "49%",
      section: "",
    },
    {
      label: "IO Name (Arabic)",
      value: foundObject.SponsorName,
      width: "49%",
      section: "",
    },
    {
      label: "Description (English)",
      value: foundObject.IOstatus,
      width: "49%",
      section: "",
    },
    {
      label: "Description (Arabic)",
      value: foundObject.IOstatus,
      width: "49%",
      section: "",
    },
    {
      label: "Investment Type (English)",
      value: foundObject.DealName,
      width: "49%",
      section: "",
    },
    {
      label: "Investment Type (Arabic)",
      value: foundObject.DealID,
      width: "49%",
      section: "",
    },
    {
      label: "Sponser Name (English)",
      value: foundObject.IOstatus,
      width: "49%",
      section: "",
    },
    {
      label: "Goal Amount (English)",
      value: foundObject.IOstatus,
      width: "49%",
      section: "",
    },
    {
      label: "Minimum Investment Amount (English)",
      value: foundObject.IOstatus,
      width: "32.3%",
      section: "",
    },
    {
      label: "Maximum Investment Amount (English)",
      value: foundObject.IOstatus,
      width: "32.3%",
      section: "",
    },
    {
      label: "Holding Period (English)",
      value: foundObject.IOstatus,
      width: "32.3%",
      section: "",
    },
    {
      label: "Expected Return Estimated (English)",
      value: foundObject.IOstatus,
      width: "32.3%",
      section: "",
    },
    {
      label: "Closing Date (English)",
      value: foundObject.IOstatus,
      width: "32.3%",
      section: "",
    },
    {
      label: "IO Status (English)",
      value: foundObject.IOstatus,
      width: "32.3%",
      section: "",
    },
  ];

  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
      groups[section] = [];
    }
    groups[section].push(field);
    return groups;
  }, {});

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

      <Tabs mt={4}>
        <TabList>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            IO Details
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            Investment Documents
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            Key Merits
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            IO artifacts
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            Investors
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            IO Cash detail
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            IO NAV detail
          </Tab>
          <Tab
            fontSize={"sm"}
            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
          >
            Distribution
          </Tab>
        </TabList>

        <TabPanels>
          <TabPanel>
            <FormInputView groupedFields={groupedFields} />
          </TabPanel>
          <TabPanel>
            <FormInputView groupedFields={groupedFields} />
          </TabPanel>
          <TabPanel>
            <FormInputView groupedFields={groupedFields} />
          </TabPanel>
          <TabPanel>
            <FormInputView groupedFields={groupedFields} />
          </TabPanel>
          <TabPanel>
            <FormInputView groupedFields={groupedFields} />
          </TabPanel>
          <TabPanel></TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
};

export default ViewIOdata;