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

import { ChevronDownIcon } from "@chakra-ui/icons";
import React, { useEffect, useState } from "react";
import {
  Badge,
  Button,
  FormControl,
  FormLabel,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  FormErrorMessage,
  Text,
  Textarea,
  Box,
} from "@chakra-ui/react";
import {
  useGetIOprepopulateDataQuery,
  useUpdateCancleStatusMutation,
  useUpdateCancleStatusToMutation,
  useUpdateStatusIoMutation,
} from "../../../../Services/io.service";
import { useParams } from "react-router-dom";

const UpdateIOStatus = ({ isOpen, onClose, status }) => {
  const params = useParams();
  const id = params?.id;
  const [selectedItem, setSelectedItem] = useState();
  const [isLoadingg, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [selectedStatusId, setSelectedStatusId] = useState("");

  const { data } = useGetIOprepopulateDataQuery();
  const [updateStatusIo] = useUpdateStatusIoMutation();
  const [updateCancleStatus] = useUpdateCancleStatusToMutation();
  const [message, setMessage] = useState(null);
  const [messageError, setMessageError] = useState(null);

  // useEffect(() => {
  //   setSelectedStatusId(status?.[0]?.id);
  // }, [status]);

  const handleMenuItemClick = (item, id) => {
    setSelectedItem(item);
    setSelectedStatusId(id);
  };

  const handleSubmit = async (data) => {
    if (!selectedStatusId) {
      setError("Please select status");
      return;
    }
    if (!message) {
      return setMessageError("message is required");
    }
    setError("");
    setIsLoading(true);
    try {
      let res;

      // If selectedItem is 'Cancelled', make the updateCancelStatus API call
      if (selectedItem === import.meta.env.VITE_STATUS_CANCELLED) {
        res = await updateCancleStatus({
          id: id,
          data: { comments: message },
        });
      }
      // Otherwise, make the updateStatusIo API call
      else {
        res = await updateStatusIo({
          data: {
            ioStatus_xid: selectedStatusId,
          },
          id,
        });
      }

      console.log("API Response:", res);
      setIsLoading(false);
      handleClose();
    } catch (error) {
      setIsLoading(false);
    }
  };

  const handleClose = () => {
    setSelectedItem(null);
    setSelectedStatusId(null);
    setMessage(null);
    setMessageError(null);
    onClose();
    setError("");
  };

  return (
    <Modal isOpen={isOpen} onClose={handleClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader fontSize={"md"}>Update IO Status Transaction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <FormControl isInvalid={!!error}>
            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
              Status
            </FormLabel>
            <Menu>
              <MenuButton
                as={Button}
                rightIcon={<ChevronDownIcon />}
                fontSize={"sm"}
                fontWeight={500}
                w={"100%"}
                textAlign={"left"}
              >
                {selectedItem ? (
                  <Badge
                    rounded={"full"}
                    pt={1.5}
                    pb={1.5}
                    ps={4}
                    pe={4}
                    mt={1.5}
                    mb={1.5}
                    textTransform={"none"}
                    colorScheme={
                      selectedItem === import.meta.env.VITE_STATUS_DRAFT
                        ? "gray"
                        : selectedItem ===
                          import.meta.env.VITE_STATUS_PROCESSING
                        ? "yellow"
                        : selectedItem === import.meta.env.VITE_STATUS_OPEN
                        ? "blue"
                        : selectedItem === import.meta.env.VITE_STATUS_CLOSED
                        ? "green"
                        : selectedItem === import.meta.env.VITE_STATUS_EXITED
                        ? "red"
                        : selectedItem === import.meta.env.VITE_STATUS_CANCELLED
                        ? "orange"
                        : "purple"
                    }
                    py={"3px"}
                    px={"8px"}
                  >
                    {selectedItem}
                  </Badge>
                ) : (
                  "Select Item"
                )}
              </MenuButton>

              {status?.length > 0 ? (
                <MenuList w={"400px"}>
                  {status?.map(({ id, statusAdmin }) => (
                    <MenuItem
                      key={id}
                      fontSize={"sm"}
                      onClick={() => handleMenuItemClick(statusAdmin, id)}
                    >
                      <Badge
                        rounded={"full"}
                        pt={1.5}
                        pb={1.5}
                        ps={4}
                        pe={4}
                        mt={1.5}
                        mb={1.5}
                        textTransform={"none"}
                        colorScheme={
                          statusAdmin === import.meta.env.VITE_STATUS_DRAFT
                            ? "gray"
                            : statusAdmin ===
                              import.meta.env.VITE_STATUS_PROCESSING
                            ? "yellow"
                            : statusAdmin === import.meta.env.VITE_STATUS_OPEN
                            ? "blue"
                            : statusAdmin === import.meta.env.VITE_STATUS_CLOSED
                            ? "green"
                            : statusAdmin === import.meta.env.VITE_STATUS_EXITED
                            ? "red"
                            : statusAdmin ===
                              import.meta.env.VITE_STATUS_CANCELLED
                            ? "orange"
                            : "purple"
                        }
                        py={"1px"}
                        px={"8px"}
                      >
                        {statusAdmin}
                      </Badge>
                    </MenuItem>
                  ))}
                </MenuList>
              ) : (
                ""
              )}
            </Menu>
            <FormErrorMessage fontSize={"xs"} fontWeight={600}>
              {error}
            </FormErrorMessage>
          </FormControl>
          {selectedItem === import.meta.env.VITE_STATUS_CANCELLED && (
            <FormControl mt={5} isRequired>
              <FormLabel fontSize={"sm"} fontWeight={400}>
                Message
              </FormLabel>
              <Textarea
                resize={"none"}
                rounded={5}
                size="sm"
                onChange={(e) => setMessage(e.target.value)}
              />
            </FormControl>
          )}
          {messageError && (
            <Text fontSize={"sm"} color={"red"}>
              {messageError}
            </Text>
          )}
        </ModalBody>
        <ModalFooter>
          <Button
            colorScheme="forestGreen"
            mr={3}
            color={"#fff"}
            size={"sm"}
            rounded={"sm"}
            onClick={handleSubmit}
            isLoading={isLoadingg}
          >
            Save
          </Button>
          <Button size={"sm"} rounded={"sm"} mr={3} onClick={handleClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default UpdateIOStatus;