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,
  FormLabel,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from "@chakra-ui/react";
import {
  useGetIOByIdQuery,
  useGetIOprepopulateDataQuery,
  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(status?.[0]?.statusAdmin);
  const [isLoadingg, setIsLoading] = useState(false);
  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
  const [selectedStatusId, setSelectedStatusId] = useState(status?.[0]?.id);
  useEffect(() => {
    setSelectedItem(status?.[0]?.statusAdmin)
    setSelectedStatusId(status?.[0]?.id)
  }, [status])
  
  

  

  const [updateStatusIo] = useUpdateStatusIoMutation();

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

  const handleSubmit = async () => {
    setIsLoading(true)
    try {
      const res = await updateStatusIo({
        data: {
          ioStatus_xid: selectedStatusId,
        },
        id,
      });
      console.log(res);
      setIsLoading(false)
      onClose()
    } catch (error) {}
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader fontSize={"md"}>Update IO Status Transaction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
            Status
          </FormLabel>
          <Menu>
            <MenuButton
              as={Button}
              rightIcon={<ChevronDownIcon />}
              fontSize={"sm"}
              fontWeight={500}
              w={"100%"}
              textAlign={"left"}
            >
              <Badge 
          textTransform={"none"}
          variant={"subtle"}
          colorScheme={
            selectedItem === "Draft"
              ? "blue"
              : selectedItem === "Processing"
              ? "yellow"
              : selectedItem === "Open"
              ? "forestGreen"
              : selectedItem === "Closed"
              ? "red":null
          } py={"3px"} px={"8px"}>
                    {selectedItem ? selectedItem: "No action"}
                  </Badge>
            </MenuButton>
            
            <MenuList w={"400px"}>
              {status?.map(({ id, statusAdmin }) => (
                <MenuItem
                  key={id}
                  fontSize={"sm"}
                  onClick={() => handleMenuItemClick(statusAdmin, id)}
                >
                  <Badge 
          textTransform={"none"}
          variant={"subtle"}
          colorScheme={
            statusAdmin === "Draft"
              ? "blue"
              : statusAdmin === "Processing"
              ? "yellow"
              : statusAdmin === "Open"
              ? "forestGreen"
              : "red"
          } py={"1px"} px={"8px"}>
                    {statusAdmin}
                  </Badge>
                </MenuItem>
              ))}
            </MenuList>
          </Menu>
        </ModalBody>
        <ModalFooter>
          <Button
            // bg={"hsla(139, 100%, 14%, 1)"}
            colorScheme="forestGreen"
            mr={3}
            color={"#fff"}
            // _hover={{
            //   bg: "hsl(139deg 98.99% 26.59%)",
            // }}
            size={"sm"}
            rounded={"sm"}
            onClick={handleSubmit}
            isLoading={isLoadingg}
          >
            Save
          </Button>
          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default UpdateIOStatus;