import { Box } 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";

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

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

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

  const formFields = [
    {
      label: "Investment name",
      value: foundObject.investmentName,
      type: "text",
      isRequired: true,
      section: "Personal Details",
    },
    {
      label: "Investment Name (Arabic)",
      value: foundObject.investmentNameArabic,
      type: "text",
      isRequired: true,
      arabic: true,
      section: "Personal Details",
    },
    {
      label: "Description",
      value: foundObject.description,
      type: "text",
      isRequired: true,
      arabic: true,
      section: "Personal Details",
    },
    {
      label: "Description Arabic",
      value: foundObject.descriptionArabic,
      type: "text",
      isRequired: true,
      section: "Personal Details",
    },
    // {
    //   label: "Bank name",
    //   value: foundObject.bankName,
    //   type: "text",
    //   isRequired: true,
    //   section: "Bank Details",
    // },
    // {
    //   label: "Account Name",
    //   value: foundObject.accountNumber,
    //   type: "text",
    //   isRequired: true,
    //   section: "Bank Details",
    // },
    // {
    //   label: "SWIFT/BIC Code",
    //   value: foundObject.swiftCode,
    //   type: "text",
    //   isRequired: true,
    //   section: "Bank Details",
    // },
    // {
    //   label: "Account Email",
    //   value: foundObject.bankEmail,
    //   type: "text",
    //   isRequired: true,
    //   section: "Bank Details",
    // },
  ];

  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}>
      <span
        onClick={() => navigate(-1)}
        style={{ fontSize: "15px", cursor: "pointer" }}
      >
        <ArrowBackIcon cursor={"pointer"} /> Back
      </span>
      <FormInputView groupedFields={groupedFields} />
    </Box>
  );
};

export default ViewInvestmentType;
