tanami-admin-panel/src/Pages/IO_Management/CreateIO/IODetails.jsx

import React, { useContext, useEffect, useState } from "react";
import FormInputMain from "../../../Components/FormInputMain";
import { useNavigate, useParams } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import { generateUniqueId } from "../../../Contexts/GlobalStateProvider";
import { useGetInvestmentTypesQuery } from "../../../Services/investment.type.service";
import { useGetActiveSponserMasterQuery } from "../../../Services/sponser.service";
import {
  useCreateIOMutation,
  useGetIOByIdQuery,
  useUpdateIOMutation,
} from "../../../Services/io.service";
import ToastBox from "../../../Components/ToastBox";
import {
  Input,
  Table,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
  useToast,
} from "@chakra-ui/react";
import { formatDate } from "../../Master/Sponser/Sponsers";

import behrain from "../../../assets/bahrain_flag.png";
import kuwait from "../../../assets/kuwait_flag.png";
import oman from "../../../assets/oman_flag.png";
import qatar from "../../../assets/qatar_flag.png";
import uae from "../../../assets/uae_flag.png";
import saudi from "../../../assets/saudi_arabia_flag.png";
import { formatDatee } from "../../../Components/FormField";
import { removeTrailingZeros } from "../../../Constants/Constants";

const schema = yup.object().shape({
  investmentNameEnglish: yup
    .string()
    .required("IO name in English is required")
    .min(3, "IO name in English must be at least 3 characters long")
    .max(150, "IO name in English must be at most 150 characters long"),

  investmentNameArabic: yup
    .string()
    .required("IO name in Arabic is required")
    .min(3, "IO name in Arabic must be at least 3 characters long")
    .max(50, "IO name in Arabic must be at most 50 characters long"),

  descriptionEnglish: yup
    .string()
    .required("Description in English is required")
    .min(10, "Description in English must be at least 10 characters long")
    .max(1000, "Description in English must be at most 1000 characters long"),

  descriptionArabic: yup
    .string()
    .required("Description in Arabic is required")
    .min(10, "Description in Arabic must be at least 10 characters long")
    .max(2000, "Description in Arabic must be at most 500 characters long"),
    expectedReturnArabic: yup
      .string()
      .required("Expected return in Arabic is required"),

      goalAmount: yup
      .number()
      .typeError("Goal Amount is must be number")
      .required('Goal amount is required')
      .positive('Goal amount must be a positive number'),

  closingDate: yup
    .date()
    .notRequired("Closing date is required")
    .min(new Date(), "Closing date cannot be in the past"),

  holdingPeriod: yup.string().required("Holding period is required"),
  holdingPeriodArabic: yup.string().required("Holding period is required"),

  // minInvestmentAmount: yup
  //   .number()
  //   .required("Minimum investment is required")
  //   .positive("Minimum investment must be a positive number")
  //   .min(1, "Minimum investment must be at least 1"),

  ISIN: yup.string().notRequired(),

  InvestmentDetails: yup.string().notRequired(),

  comment: yup.string().notRequired()
  .min(10, "Comment must be at least 10 characters long")
  .max(100, "Comment must be at most 100 characters long"),

  expectedReturn: yup
    .string()
    .required("Expected return is required"),
});


const IODetails = ({ enableNextTab, index, data }) => {



 

  const params = useParams();
  const navigate = useNavigate();
  const toast = useToast();


  const handleInputChange = (index, newValue) => {
    const updatedValues = [...values];
    updatedValues[index].value = newValue;
    setValues(updatedValues);
  };

  // ======================[ States ]
  const [isLoading, setIsLoading] = useState();

  // ======================[ Variables Api ]
  const id = params?.id;

  // ======================[ Cotext Api ]
  const { investmentType, sponser, setIOStatus, setIODetails, setIOloading } =
    useContext(GlobalStateContext);

  // ======================[ RTK Querry Api ]

  const {
    data: IObyID,
    isLoading: IObyIDisLoading,
    error: IObyIDerror,
  } = useGetIOByIdQuery(id, { skip: !id });

  const [creatIO] = useCreateIOMutation();
  const [updateIO] = useUpdateIOMutation();

  // ======================[ Selector filter ]
  const investmentTypeOptions = data?.investmentType.map(
    ({ investmentTypeName, id }) => {
      return {
        label: investmentTypeName,
        value: Number(id),
      };
    }
  );

  const sponserNameOption = data?.sponsor?.map(({ sponsorName, id }) => {
    return {
      label: sponsorName,
      value: Number(id),
    };
  });

  const miniValue = data?.country?.map(
    ({ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, index) => {
      return {
        id:id,
        country: countryName,
        value: minInvestmentAmt,
        logo: flagIcon,
        curr: currency?.currencyCode,
      };
    }
  );



  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, country_xid, })=>{
    return{
      id:country_xid,
      country: country?.countryName,
      value: removeTrailingZeros(minInvestmentAmt),
      logo: country?.flagIcon,
      curr: country?.countryCode,
    }
  })

  
  const [values, setValues] = useState(id?minInvestmentById:miniValue);
  const formatNumber = (num) => {
    // Remove non-numeric characters and format with commas
    return num.replace(/\D/g, '')
              .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };
  // console.log(values);

  // ======================[ Validator filter ]
  const {
    control,
    reset,
    watch,
    setValue,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  useEffect(() => {
    setIOloading(IObyIDisLoading)
    setIODetails({
      ...IObyID?.data,
    });
    if (IObyID?.data) {
      reset({
        investmentNameEnglish: IObyID?.data?.investmentNameEnglish,
        investmentNameArabic: IObyID?.data?.investmentNameArabic,
        descriptionEnglish: IObyID?.data?.descriptionEnglish,
        descriptionArabic: IObyID?.data?.descriptionArabic,
        goalAmount: IObyID?.data?.goalAmount,
        closingDate: formatDatee(IObyID?.data?.closingDate),
        holdingPeriod: IObyID?.data?.holdingPeriod,
        ISIN: IObyID?.data?.ISIN,
        comment: IObyID?.data?.comment,
        expectedReturn: IObyID?.data?.expectedReturn,
        investmentType_xid: IObyID?.data?.investmentType_xid,
        InvestmentDetails: IObyID?.data?.InvestmentDetails,
        minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
        holdingPeriodArabic: IObyID?.data?.minInvestmentAmount,
        expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
      });
    }

  }, [id, IObyID]);

  



  // const minInvestmentById = 

  //=======================[ Creator ]
  const formFields = [
    {
      label: "IO Name",
      name: "investmentNameEnglish",
      value: IObyID?.data?.investmentNameEnglish,
      type: "text",
      isRequired: true,
      section: " ",
      width: "49%",
      maxLength:150,
      helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameEnglish?.length || 0} characters.`
    },
    {
      label: "IO Name (Arabic)",
      name: "investmentNameArabic",
      value: IObyID?.data?.investmentNameArabic,
      type: "text",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      maxLength:150,
      helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameArabic?.length || 0} characters.`
    },
    {
      label: "Description",
      name: "descriptionEnglish",
      value: IObyID?.data?.descriptionEnglish,
      type: "textarea",
      isRequired: true,
      section: " ",
      width: "49%",
      maxLength:1000,
      helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionEnglish?.length || 0} characters.`
    },
    {
      label: "Description (Arabic)",
      name: "descriptionArabic",
      value: IObyID?.data?.descriptionArabic,
      type: "textarea",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      maxLength:1000,
      helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionArabic?.length || 0} characters.`
      
    },
    {
      label: "Holding Period",
      name: "holdingPeriod",
      type: "text",
      placeHolder: "1Y",
      isRequired: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriod,
      maxLength:20,
      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriod?.length || 0} characters.`
    },
    {
      label: "Holding Period (Arabic)",
      name: "holdingPeriodArabic",
      type: "text",
      placeHolder: "1Y",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriodArabic,
      maxLength:20,
      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriodArabic?.length || 0} characters.`
    },


    {
      label: "Expected Return",
      name: "expectedReturn",
      type: "text",
      isRequired: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.expectedReturn,
    },

    {
      label: "Expected Return (Arabic)",
      name: "expectedReturnArabic",
      type: "text",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.expectedReturnArabic,
    },


    {
      label: "Investment Type",
      placeHolder: "Select option",
      name: "investmentType",
      type: "select",
      isRequired: true,
      section: " ",
      width: "32.3%",
      options: investmentTypeOptions,
      value: IObyID?.data?.investmentType_xid,
    },
    {
      label: "Sponsor Name",
      placeHolder: "Select option",
      name: "sponserName",
      type: "select",
      isRequired: true,
      options: sponserNameOption,
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.sponsor_xid,
    },
    {
      label: "Goal Amount",
      placeHolder: "$00.00",
      value: IObyID?.data?.goalAmount,
      name: "goalAmount",
      type: "number",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "Closing Date",
      name: "closingDate",
      // value: "IObyID?.data?.closingDate",
      type: "date",
      isRequired: true,
      section: " ",
      width: "32.3%",
      dateValue:formatDatee(IObyID?.data?.closingDate),
      // helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}`
    },
    {
      label: "ISIN",
      placeHolder: "",
      name: "ISIN",
      type: "text",
      align:"right",
      section: " ",
      width: "32.3%",
    },
    {
      label: "Investment Details",
      placeHolder: "",
      name: "InvestmentDetails",
      type: "text",
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.InvestmentDetails,
    },

    {
      label: "Minimum Investment",
      placeHolder: "Enter comment here",
      name: "table",
      type: "table",
      section: " ",
      width: "100%",
      isRequired: true,
      options: investmentTypeOptions,
      handleInputChange: handleInputChange,
      value: values,
    },

    {
      label: "Comment",
      placeHolder: "Enter comment here",
      name: "comment",
      type: "textarea",
      section: " ",
      width: "100%",
      options: investmentTypeOptions,
      value: IObyID?.data?.comment,
      maxLength:100,
      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.`
    },
  ];
  //=======================[ Editor ]
  // const formEditFields = [
  //   {
  //     label: "IO Name",
  //     value: IObyID?.data?.investmentNameEnglish,
  //     name: "investmentNameEnglish",
  //     type: "text",
  //     section: " ",
  //     width: "49%",
  //     isRequired: true,
  //   },
  //   {
  //     label: "IO Name (Arabic)",
  //     name: "investmentNameArabic",
  //     type: "text",
  //     value: IObyID?.data?.investmentNameArabic,
  //     isRequired: true,
  //     arabic: true,
  //     section: " ",
  //     width: "49%",
  //   },
  //   {
  //     label: "Description",
  //     name: "descriptionEnglish",
  //     value: IObyID?.data?.descriptionEnglish,
  //     type: "textarea",
  //     isRequired: true,
  //     section: " ",
  //     width: "49%",
  //   },
  //   {
  //     label: "Description (Arabic)",
  //     name: "descriptionArabic",
  //     value: IObyID?.data?.descriptionArabic,
  //     type: "textarea",
  //     isRequired: true,
  //     arabic: true,
  //     section: " ",
  //     width: "49%",
  //   },

  //   {
  //     label: "Goal Amount",
  //     placeHolder: "$00.00",
  //     value: IObyID?.data?.goalAmount,
  //     name: "goalAmount",
  //     type: "number",
  //     isRequired: true,
  //     section: " ",
  //     width: "32.3%",
  //   },
  //   {
  //     label: "Closing Date",
  //     name: "closingDate",
  //     type: "date",
  //     isRequired: true,
  //     value: IObyID?.data?.closingDate,
  //     section: " ",
  //     width: "32.3%",
  //   },
  //   {
  //     label: "Holding Period",
  //     name: "holdingPeriod",
  //     value: IObyID?.data?.holdingPeriod,
  //     type: "number",
  //     isRequired: true,
  //     placeHolder: "1Y",
  //     section: " ",
  //     width: "32.3%",
  //   },
  //   {
  //     label: "Minimum Investment Amount",
  //     placeHolder: "$00.00",
  //     name: "minInvestmentAmount",
  //     value: IObyID?.data?.minInvestmentAmount,
  //     type: "number",
  //     isRequired: true,
  //     section: " ",
  //     width: "32.3%",
  //   },
  //   {
  //     label: "ISIN",
  //     placeHolder: "$00.00",
  //     name: "ISIN",
  //     value: IObyID?.data?.ISIN,
  //     type: "number",
  //     section: " ",
  //     width: "32.3%",
  //   },
  //   {
  //     label: "Investment Details",
  //     placeHolder: "",
  //     name: "InvestmentDetails",
  //     value: IObyID?.data?.InvestmentDetails,
  //     type: "text",
  //     section: " ",
  //     width: "32.3%",
  //   },
  //   {
  //     label: "Expected Return Estimated",
  //     placeHolder: "$00.00",
  //     name: "expectedReturn",
  //     type: "number",
  //     isRequired: true,
  //     value: IObyID?.data?.expectedReturn,
  //     section: " ",
  //     width: "32.3%",
  //   },

  //   {
  //     label: "Investment Type",
  //     placeHolder: "Select option",
  //     value: IObyID?.data?.investmentType_xid,
  //     name: "investmentType_xid",
  //     type: "select",
  //     isRequired: true,
  //     section: " ",
  //     width: "32.3%",
  //     options: investmentTypeOptions,
  //   },
  //   {
  //     label: "Sponsorer Name",
  //     placeHolder: "Select option",
  //     name: "sponsor_xid",
  //     type: "select",
  //     options: sponserNameOption,
  //     value: IObyID?.data?.sponsor_xid,
  //     section: " ",
  //     isRequired: true,
  //     width: "32.3%",
  //   },

  //   {
  //     label: "Comment",
  //     placeHolder: "Enter comment here",
  //     name: "comment",
  //     type: "textarea",
  //     value: IObyID?.data?.comment,
  //     section: " ",
  //     width: "100%",
  //     // options: investmentTypeOptions,
  //   },
  // ];

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

  const onSubmit = async (data) => {
    delete data.table;
    setIsLoading(true);
    // console.log(data);

    const updatedMinAmount = values?.map(({id, value})=>{
      return {
        country_xid:id,
        minInvestmentAmt: Number(value)
      }
    })

    const formData = {
      ...data,
      investmentType_xid: Number(data.investmentType),
      sponsor_xid: Number(data.sponserName),
    minInvestmentAmt:updatedMinAmount
    };

    // console.log(formData);
    // console.log(formData);
    if (id) {
      const res = await updateIO({ data: formData, id });
      console.log(res);
      if (res?.data?.statusCode === 200) {
        setIsLoading(false);
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        navigate(`/view-io/${id}`);
        enableNextTab(index);
      } else if(res?.error?.status === 400){
        setIsLoading(false);
        toast({
          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
        });
      }
    } else {
      try {
        const res = await creatIO(formData);
        console.log(res?.error?.status);
        if (res?.data?.statusCode === 200) {
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.data?.message} />,
          });
          navigate(`/view-io/${res?.data?.data}`);
          enableNextTab(index);
        } else if(res?.error?.status === 400){
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
          });
        }else if(res?.error?.status === 500){
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
          });
        }
      } catch (error) {
        setIsLoading(false);
        console.log(error);
      }
    }


    // ==========================
    // if (params?.id) {
    //   return enableNextTab(index);
    // }
    // const id = generateUniqueId();
    // const status = "Draft";
    // // setValue("id", id)
    // const updatedData = { ...data, id, ioStatus: status };

    // // Add the updated data to the IODetails array
    // setIODetails([...IODetails, updatedData]);

    // // Navigate to the new route
    // navigate(`/create-io/${updatedData?.id}`);
  };

  return IObyIDisLoading ? (
    <FullscreenLoaders height={'70vh'} />
  ) : (
    
    <FormInputMain
      p={0.1}
      w={250}
      width={"23.8%"}
      groupedFields={groupedFields}
      control={control}
      errors={errors}
      onSubmit={handleSubmit(onSubmit)}
      btnLoading={isLoading}
      submitTitle={id ? "Update" : "Submit"}
    ></FormInputMain>
  );
};

export default IODetails;