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;