extra fee edit and cancel modal

import React, { useEffect, useState } from "react";
import {
  Box,
  Button,
  Flex,
  FormControl,
  FormLabel,
  HStack,
  Input,
  Tag,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Spinner,
  Text,
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
  useDisclosure,
  IconButton,
  Select,
  Badge,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalCloseButton,
  ModalBody,
  ModalFooter,
  Grid,
  GridItem,
  FormErrorMessage,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import {
  useGetAllExtraFeeUser,
  useUpdateExtraFeeUser,
} from "../../../services/extraFeeUser.service";
import { ErrorAlert, SuccessAlert } from "../../../utils/Helper";
import { ExtraFeeAssignStudent } from "./ExtraFeeAssignStudent";
import { EditIcon, SmallCloseIcon } from "@chakra-ui/icons";
import { PaymentModal } from "./PaymentForExtraFees";
import { last } from "lodash";
import { useRouter } from "next/router";
import moment from "moment";
import { BsThreeDotsVertical } from "react-icons/bs";

export const ExtraFeeData = ({ userId, userCourseId }) => {

  const { query } = useRouter();

  const [isDrawerOpen, setDrawerOpen] = useState(false);

  const { isOpen: isModalOpen, onOpen: openModal, onClose: closeModal } = useDisclosure();

  const { isOpen: isPayModalOpen, onOpen: openPayModal, onClose: closePayModal } = useDisclosure();

  const [currentFee, setCurrentFee] = useState(null);

  const { isOpen: cancelFeeIsOpen, onOpen: cancelFeeOnOpen, onClose: cancelFeeOnClose } = useDisclosure()


  const { data, isPending, refetch } = useGetAllExtraFeeUser({
    userId,
    userCourseId: userCourseId,
    nonPaginated: true,
    enabled: !!userId
  });

  const { mutate, isPending: updatePending } = useUpdateExtraFeeUser({
    onSuccess: () => {
      SuccessAlert("Extra fee user has been successfully updated");
      refetch()
      setDrawerOpen(false);
    },
    onError: (e) => {
      ErrorAlert(e.message);
    },
  });

  const handleEditClick = (fee) => {
    setCurrentFee(fee);
    setDrawerOpen(true);
  };

  const handleCancelClick = (fee) => {
    setCurrentFee(fee);
    cancelFeeOnOpen(true);
  };

  const handlePayClick = (fee) => {
    setCurrentFee(fee);
    openPayModal();
  };

  const handleSave = async (values) => {
    try {
      if (values.initialAmount < currentFee.paidAmount) {
        ErrorAlert("Intital amount can not be less paid amount")
      } else {
        mutate({ ...values, id: currentFee._id });
      }
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <>
      {userId !== null ? <>
        <HStack justify="space-between">
          <Box>
            <Tag
              px={4}
              variant="subtle"
              fontWeight="bold"
              py={2}
              colorScheme="blue"
            >
              Total Records {data?.length || 0}
            </Tag>
          </Box>
          <Button onClick={openModal} colorScheme="blue" size="sm">
            Add Extra Fee
          </Button>
        </HStack>

        {isPending ? (
          <Flex justify="center" mt={4}>
            <Spinner />
          </Flex>
        ) : (
          <>
            <FeeTable data={data} onEdit={handleEditClick} onCancel={handleCancelClick} onPay={handlePayClick} cancelFeeOnOpen={cancelFeeOnOpen} />
            {!data?.length && (
              <Text mt={4} textAlign="center" color="gray.500">
                No records found.
              </Text>
            )}
          </>
        )}
        <FeeCancelModal isOpen={cancelFeeIsOpen} onClose={cancelFeeOnClose} onSave={handleSave} pending={updatePending} fee={currentFee} />

        <FeeModal
          isOpen={isDrawerOpen}
          onClose={() => setDrawerOpen(false)}
          onSave={handleSave}
          fee={currentFee}
          pending={updatePending}
        />
        {isModalOpen && <ExtraFeeAssignStudent
          closeModal={closeModal}
          studentDetails={userId}
          isOpen={isModalOpen}
          refetch={refetch}
          userCourseId={query.userCourseId}
        />}
        {isPayModalOpen && <PaymentModal
          closeModal={closePayModal}
          studentDetails={currentFee}
          userId={currentFee.userId}
          courseId={currentFee.courseId}
          isOpen={isPayModalOpen}
          extraFeeUserId={currentFee._id}
          refetch={refetch}
        />}
      </> : <Flex flexDirection={"row"} justifyContent={"center"}>
        <Text fontSize={"2xl"} color={"red.500"} fontWeight={"bold"}>Admission Fees Not Paid</Text>
      </Flex>}
    </>
  );
};

export const FeeTable = ({ data, onEdit, onCancel, onPay, cancelFeeOnOpen }) => {
  const statusColor = {
    pending: "orange",
    paid: "green",
    cancel: "red",
    PartialPayment: "purple",
  };
  return (
    <Box overflowX="auto">
      <Table size="sm" mt={4}>
        <Thead bg={"gray.100"}>
          <Tr>
            <Th>sr. no.</Th>
            <Th>Fee Name</Th>
            <Th>Fees Type</Th>
            <Th>Due Date</Th>
            <Th>Initial Amount</Th>
            <Th>Due Amount</Th>
            <Th>Paid Amount</Th>
            <Th>Status</Th>
            <Th>Actions</Th>
          </Tr>
        </Thead>
        <Tbody>
          {data?.map((fee, i) => (
            <Tr key={fee._id}>
              <Td>{i + 1}</Td>
              <Td>{fee.extraFeesId?.name}</Td>
              <Td>{fee.extraFeesId?.applicableOn}</Td>
              <Td>{moment(fee.dueDate).format("DD-MMM-YYYY") ?? "-"}</Td>
              <Td>{fee?.initialAmount}</Td>
              <Td>{fee?.initialAmount - fee.paidAmount}</Td>
              <Td>{fee.paidAmount}</Td>
              <Td>
                <Badge colorScheme={statusColor[fee.status] || "gray"} variant={"outline"}>
                  {fee.status}
                </Badge>
              </Td>
              <Td>
                <HStack>
                  <Button size="xs" colorScheme="blue" onClick={() => onPay(fee)}>
                    Collect
                  </Button>
                  <Menu>
                    <MenuButton
                      as={IconButton}
                      aria-label='Options'
                      icon={<BsThreeDotsVertical />}
                      // variant='outline'
                      bgColor={"white"}
                      size={"xs"}
                    />
                    <MenuList>
                      <MenuItem icon={<EditIcon />} onClick={() => onEdit(fee)}>
                        Edit Fee
                      </MenuItem>
                      <MenuItem icon={<SmallCloseIcon />} onClick={() => onCancel(fee)}>
                        Cancel Fee
                      </MenuItem>
                    </MenuList>
                  </Menu>
                  {/* <IconButton
                    size="xs"
                    onClick={() => onEdit(fee)}
                    icon={<BsThreeDotsVertical />}
                  /> */}
                </HStack>
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </Box>
  );
};

// export const FeeDrawer = ({ isOpen, onClose, onSave, fee, pending, updatePending }) => {

//   const { register, handleSubmit, reset, setValue } = useForm({
//     defaultValues: {
//       initialAmount: "",
//       remark: "",
//       status: ""
//     },
//   });

//   useEffect(() => {
//     if (fee) {
//       const lastHistory = last(fee.initialAmountHistory) || {};
//       reset({
//         initialAmount: fee.initialAmount || "",
//         remark: lastHistory.remark || "",
//         status: ""
//       });
//     }
//   }, [fee, reset]);

//   const handleClose = () => {
//     reset();
//     onClose();
//   };

//   const onSubmit = (values) => {
//     onSave(values);
//     handleClose();
//   };

//   const handleCancel = () => {
//     setValue("status", "cancel");
//     handleSubmit(onSubmit)();
//   };

//   return (
//     <Drawer isOpen={isOpen} onClose={handleClose} size="sm">
//       <DrawerOverlay />
//       <DrawerContent>
//         <DrawerHeader>{fee ? "Edit Extra Fee" : "Add Extra Fee"}</DrawerHeader>
//         <DrawerBody>
//           <form onSubmit={handleSubmit(onSubmit)}>
//             <FormControl>
//               <FormLabel>Initial Amount</FormLabel>
//               <Input
//                 type="number"
//                 {...register("initialAmount", { required: true })}
//               />
//             </FormControl>
//             <FormControl mt={4}>
//               <FormLabel>Remark</FormLabel>
//               <Input type="text" {...register("remark")} />
//             </FormControl>

//             <input type="hidden" {...register("status")} />

//             <DrawerFooter px={0}>
//               {/* <Button
//                 variant="solid"
//                 colorScheme="red"
//                 mr="auto"
//                 onClick={handleCancel}
//                 isPending={pending || updatePending}
//               >
//                 Cancel Fee
//               </Button> */}

//               <Button variant="outline" mr={3} onClick={handleClose}>
//                 Close
//               </Button>

//               <Button type="submit" colorScheme="blue" isPending={pending || updatePending}>
//                 Save
//               </Button>
//             </DrawerFooter>
//           </form>
//         </DrawerBody>
//       </DrawerContent>
//     </Drawer>
//   );
// };


export const FeeModal = ({ isOpen, onClose, onSave, fee, pending, updatePending }) => {
  const { register, handleSubmit, reset, setValue, watch, formState: { errors } } = useForm({
    defaultValues: {
      initialAmount: "",
      confirmAmount: "",
      remark: "",
      status: ""
    },
  });

  const initialAmount = watch("initialAmount");
  const confirmAmount = watch("confirmAmount");

  useEffect(() => {
    if (fee) {
      const lastHistory = fee.initialAmountHistory?.slice(-1)[0] || {};
      reset({
        initialAmount: fee?.initialAmount || "",
        confirmAmount: fee?.initialAmount || "",
        remark: lastHistory.remark || "",
        status: ""
      });
    }
  }, [fee, reset]);

  const handleClose = () => {
    reset();
    onClose();
  };

  const onSubmit = (values) => {
    if (Number(values.initialAmount) !== Number(values.confirmAmount)) {
      ErrorAlert("Amount and Confirm Amount must match");
      return;
    }

    const dataToSubmit = {
      initialAmount: values.initialAmount,
      remark: values.remark,
      status: values.status
    };

    onSave(dataToSubmit);
    handleClose();
  };

  const handleCancel = () => {
    setValue("status", "cancel");
    handleSubmit(onSubmit)();
  };

  return (
    <Modal isOpen={isOpen} onClose={handleClose} size="md">
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>{fee ? "Edit Extra Fee" : "Add Extra Fee"}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Flex justifyContent={"center"} mb={4}>
              <Text fontSize={"lg"} fontWeight={"semibold"}>Initial Amount: {fee?.initialAmount}</Text>
            </Flex>
            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
              <GridItem>
                <FormControl isRequired isInvalid={errors.initialAmount}>
                  <FormLabel>Amount</FormLabel>
                  <Input
                    type="number"
                    {...register("initialAmount", { required: true })}
                  />
                </FormControl>
              </GridItem>
              <GridItem>
                <FormControl isRequired isInvalid={initialAmount !== confirmAmount}>
                  <FormLabel>Confirm Amount</FormLabel>
                  <Input
                    type="number"
                    {...register("confirmAmount", { required: true })}
                  />
                  {initialAmount !== confirmAmount && initialAmount && confirmAmount && (
                    <FormErrorMessage>Amounts must be same</FormErrorMessage>
                  )}
                </FormControl>
              </GridItem>
            </Grid>
            <FormControl isRequired mt={4}>
              <FormLabel>Remark</FormLabel>
              <Input type="text" {...register("remark", { required: true })} />
            </FormControl>

            <input type="hidden" {...register("status")} />
          </form>
        </ModalBody>

        <ModalFooter>
          <Button variant="outline" mr={3} onClick={handleClose}>
            Close
          </Button>
          <Button
            type="submit"
            colorScheme="blue"
            onClick={handleSubmit(onSubmit)}
            isLoading={pending || updatePending}
            isDisabled={initialAmount !== confirmAmount}
          >
            Save
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};


export const FeeCancelModal = ({ isOpen, onClose, onSave, pending, updatePending, fee }) => {

  const { register, handleSubmit, reset, setValue } = useForm({
    defaultValues: {
      initialAmount: "",
      remark: "",
      status: "",
    },
  });

  useEffect(() => {
    if (fee) {
      const lastHistory = last(fee.initialAmountHistory) || {};
      reset({
        initialAmount: fee?.initialAmount || "",
        remark: lastHistory.remark || "",
        status: ""
      });
    }
  }, [fee, reset]);


  const handleClose = () => {
    reset();
    onClose();
  };

  const onSubmit = (values) => {
    onSave(values);
    handleClose();
  };

  const handleCancel = () => {
    setValue("status", "cancel");
    handleSubmit(onSubmit)();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Cancel Fee</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          Are you sure you want to cancel the Fee?
        </ModalBody>
        <ModalFooter>
          <Button variant="ghost" mr={3} onClick={onClose}>
            Close
          </Button>
          <Button
            variant="solid"
            colorScheme="red"
            onClick={handleCancel}
            isLoading={pending}
          >
            Confirm
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};