import { Box } from "@chakra-ui/react";
import React, { useContext } from "react";

import { useNavigate, useParams } from "react-router-dom";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import DataTable from "../../../Components/DataTable/DataTable";
import FormInputView from "../../../Components/FormInputView";

const ViewIOdetails = () => {
  const params = useParams();
  const { IODetails } = useContext(GlobalStateContext);
  console.log(IODetails);
  const { reset } = useForm(); // assuming react-hook-form

  const id = params?.id;
  console.log(id);
  const foundObject = IODetails?.find(
    (item) => item?.id.toString() === id.toString()
  );

  const formFields = [
    {
      label: "IO Name (English)",
      value: foundObject?.ioName,
      width: "49%",
      section: "",
    },
    {
      label: "IO Name (Arabic)",
      value: foundObject?.ioNameArabic,
      width: "49%",
      section: "",
    },
    {
      label: "Description (English)",
      value: foundObject?.discription,
      width: "49%",
      section: "",
    },
    {
      label: "Description (Arabic)",
      value: foundObject?.discriptionArabic,
      width: "49%",
      section: "",
    },
    {
      label: "Investment Type (English)",
      value: foundObject?.typeName,
      width: "49%",
      section: "",
    },
    // {
    //   label: "Investment Type (Arabic)",
    //   value: foundObject?.typeName,
    //   width: "49%",
    //   section: "",
    // },
    {
      label: "Sponser Name (English)",
      value: foundObject?.sponserName,
      width: "49%",
      section: "",
    },
    {
      label: "Goal Amount (English)",
      value: foundObject?.goalAmount,
      width: "49%",
      section: "",
    },
    {
      label: "Minimum Investment Amount (English)",
      value: foundObject?.minInvestment,
      width: "32.3%",
      section: "",
    },
    {
      label: "Maximum Investment Amount (English)",
      value: foundObject?.maxInvestment,
      width: "32.3%",
      section: "",
    },
    {
      label: "Holding Period (English)",
      value: foundObject?.holdingPeriod,
      width: "32.3%",
      section: "",
    },
    {
      label: "Expected Return Estimated (English)",
      value: foundObject?.expectedReturn,
      width: "32.3%",
      section: "",
    },
    {
      label: "Closing Date (English)",
      value: foundObject?.closingDate,
      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;
  }, {});

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

  return <FormInputView groupedFields={groupedFields} />;
};

export default ViewIOdetails;