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";
import { useGetInvestmentTypeByIdQuery } from "../../../Services/io.service";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";

const ViewInvestmentType = () => {
  const navigate = useNavigate();
  const params = useParams();
  const { investmentType } = useContext(GlobalStateContext);
  const { reset } = useForm(); // assuming react-hook-form
  const { data, error, isLoading } = useGetInvestmentTypeByIdQuery(params?.id);

  const id = params?.id;

  if (!data?.data) {
    return <FullscreenLoaders />;
  }

   // ========================== [Input Setup] ===========================

  const formFields = [
    {
      label: "Investment Type (English)",
      value: data?.data?.investmentTypeName,
      section: "",
    },
    {
      label: "Investment Type (Arabic)",
      value: data?.data?.investmentTypeNameArabic,
      section: "",
    },
    {
      label: "Description (English)",
      value: data?.data?.note,
      section: "",
    },
    {
      label: "Description (Arabic)",
      value: data?.data?.noteArabic,
      section: "",
    },
  ];

  // ====================== [Group Fields] =========================

  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} pt={5}>

      {/* ======================= [Input Form View] ======================  */}

      <FormInputView groupedFields={groupedFields} />

    </Box>
  );
};

export default ViewInvestmentType;
