tanami-admin-panel/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx

import React, { useContext, useEffect, useState } from "react";
import {
  Box,
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  useToast,
} from "@chakra-ui/react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
import { useParams } from "react-router-dom";
import { useAmountIvestmentMutation } from "../../../../Services/io.service";
import ToastBox from "../../../../Components/ToastBox";
import CurrencyInput from "../../../../Components/CurrencyInput";

// Validation schema
const validationSchema = yup.object().shape({
  transactionDate: yup.date().required("Date is required"),
  Total_Amount: yup.number().required("Amount is required"),
  amountInvested: yup.number().required("Amount to invest is required"),
  IoCash: yup.number().positive("IO Cash must be positive").required("IO Cash is required"),
});

// Function to format currency
const formatCurrency = (value) => {
  if (isNaN(value)) return "";
  const formatted = parseFloat(value).toFixed(2).toString();
  const [integer, decimal] = formatted.split(".");
  const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
};

const AmountInvested = ({ isOpen, onClose }) => {
  const params = useParams();
  const toast = useToast();
  const id = params?.id;
  const {
    control, 
    register,
    handleSubmit,
    reset,
    watch,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(validationSchema),
  });
  const [isLoading, setIsLoading] = useState(false);
  const { IODetails } = useContext(GlobalStateContext);
  const [amountInvested] = useAmountIvestmentMutation();

  useEffect(() => {
    if (IODetails?.totalAmtInvestmentInUSD) {
      const totalAmount = parseFloat(IODetails.totalAmtInvestmentInUSD);
      const ioCashUpdate = parseFloat(IODetails.totalAmtInvestmentInUSD);
      reset({
        Total_Amount: totalAmount,
        IoCash: ioCashUpdate,
      });
    }
  }, [IODetails, reset]);

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

    try {
      const res = await amountInvested({ data, id });
      console.log(res);
      if (res?.data?.statusCode === 200) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        setIsLoading(false);
        onClose();
      } else if (res?.error?.status === 400) {
        toast({
          render: () => (
            <ToastBox message={res?.error?.data?.message} status={"error"} />
          ),
        });
        setIsLoading(false);
      }
    } catch (error) {
      setIsLoading(false);
    }
  };

  const handleAmountChange = (e) => {
    // e might be an object or just a value, handle both cases
    const amount =
      typeof e === "object" && e.target
        ? parseFloat(e.target.value) || 0
        : parseFloat(e) || 0;
    const totalAmount = parseFloat(IODetails?.totalAmtInvestmentInUSD) || 0;
    const ioCash = (totalAmount - amount).toFixed(2);

    reset({
      amountInvested: parseFloat(amount),
      IoCash: parseFloat(ioCash),
      Total_Amount: IODetails?.totalAmtInvestmentInUSD,
    });
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay /> 
      <ModalContent>
        <ModalHeader fontSize={"md"}>Amount Invested</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <form onSubmit={handleSubmit(onSubmit)}>
            <FormControl
              mb={"15px"}
              isInvalid={!!errors.transactionDate}
              isRequired
            >
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                Date
              </FormLabel>
              <Input
                type="date"
                {...register("transactionDate")}
                size="sm"
                rounded={"sm"}
                fontSize={"sm"}
                focusBorderColor="forestGreen.300"
              />
              {errors.transactionDate && (
                <Text fontSize={"xs"} fontWeight={600} color="red.500">
                  {errors.transactionDate.message}
                </Text>
              )}
            </FormControl>

            <FormControl
              mb={"15px"}
              isInvalid={!!errors.Total_Amount}
              isReadOnly
            >
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                Amount
              </FormLabel>
              <Input
                type="text"
                value={formatCurrency(watch("Total_Amount"))}
                size="sm"
                rounded={"sm"}
                textAlign={"end"}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                readOnly
              />
              {errors.Total_Amount && (
                <Text fontSize={"xs"} fontWeight={600} color="red.500">
                  {errors.Total_Amount.message}
                </Text>
              )}
            </FormControl>

            <FormControl
              mb={"15px"}
              isInvalid={!!errors.amountInvested}
              isRequired
            >
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                Amount to invest
              </FormLabel>
              {/* <Input
                type="number"
                {...register('amountInvested')}
                size="sm"
                rounded={'sm'}
                textAlign={'end'}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                onChange={handleAmountChange}
              /> */}
              <Controller
                name="amountInvested"
                control={control}
                render={({ field }) => (
                  <CurrencyInput
                    {...field}
                    textAlign={"right"}
                    fontSize={"sm"}
                    type="number"
                    size={"sm"}
                    onChange={(value) => {
                      field.onChange(value); // This will keep the form's internal state updated
                      handleAmountChange(value); // This will trigger your custom logic
                    }}
                  />
                )}
              />
              {errors.amountInvested && (
                <Text fontSize={"xs"} fontWeight={600} color="red.500">
                  {errors.amountInvested.message}
                </Text>
              )}
            </FormControl>

            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                IO Cash
              </FormLabel>
              <Input
                type="text"
                value={formatCurrency(watch("IoCash"))}
                size="sm"
                rounded={"sm"}
                focusBorderColor="forestGreen.300"
                fontSize={"sm"}
                textAlign={"right"}
                readOnly
              />
              {errors.IoCash && (
                <Text fontSize={"xs"} fontWeight={600} color="red.500">
                  {errors.IoCash.message}
                </Text>
              )}
            </FormControl>

            <ModalFooter>
              <Button
                type="submit"
                bg={"hsla(139, 100%, 14%, 1)"}
                mr={3}
                color={"#fff"}
                _hover={{
                  bg: "hsl(139deg 98.99% 26.59%)",
                }}
                size={"sm"}
                rounded={"sm"}
                isLoading={isLoading}
              >
                Save
              </Button>
              <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
                Close
              </Button>
            </ModalFooter>
          </form>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
};

export default AmountInvested;