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";

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(50, "IO name in English must be at most 50 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")
      .min(10, "Expected return in Arabic must be at least 10 characters long")
      .max(2000, "Expected return in Arabic must be at most 500 characters long"),

  goalAmount: yup
    .number()
    .required("Goal amount is required")
    .positive("Goal amount must be a positive number")
    .min(1, "Goal amount must be at least 1"),

  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 }, index) => {
      return {
        id:id,
        country: countryName,
        value: minInvestmentAmt,
        logo: flagIcon,
        curr: countryCode,
      };
    }
  );

  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, country_xid})=>{
    return{
      id:country_xid,
      country: country?.countryName,
      value: 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,
    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%",
    },
    {
      label: "IO Name (Arabic)",
      name: "investmentNameArabic",
      value: IObyID?.data?.investmentNameArabic,
      type: "text",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
    },
    {
      label: "Description",
      name: "descriptionEnglish",
      value: IObyID?.data?.descriptionEnglish,
      type: "textarea",
      isRequired: true,
      section: " ",
      width: "49%",
      maxLength:1000
    },
    {
      label: "Description (Arabic)",
      name: "descriptionArabic",
      value: IObyID?.data?.descriptionArabic,
      type: "textarea",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      
    },
    {
      label: "Holding Period",
      name: "holdingPeriod",
      type: "text",
      placeHolder: "1Y",
      isRequired: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriod,
    },
    {
      label: "Holding Period (Arabic)",
      name: "holdingPeriodArabic",
      type: "text",
      placeHolder: "1Y",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriodArabic,
    },


    {
      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: "Sponsorer 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
    },
  ];
  //=======================[ 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"} />,
          });
        }
      } 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;