import { IconButton, Popover, Tooltip } from "@mui/material";
import { useContext, useState } from "react";
import { useDispatch } from "react-redux";
import {
  CLOSE_MODAL,
  DRAWER,
  OPEN_MODAL,
} from "../../../../lib/redux/slices/appSlice";
import TuneIcon from "@mui/icons-material/Tune";
import EditIcon from "@mui/icons-material/Edit";
import { SlaughterEnterBarWeight } from "../../../file/components/slaughter-enter-bar-weight/SlaughterEnterBarWeight";
import { Grid } from "../../../../components/grid/Grid";
import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
import { SlaughterEnterInformationModal } from "../slaughter-enter-information-modal/SlaughterEnterInformationModal";
import { AppContext } from "../../../../contexts/AppContext";
import { slaughterUpdateNoneRecieptService } from "../../services/slaughter-update-none-recipt";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";

export const SlaughterEnterInformationOperation = ({ item, updateTable }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "popover" : undefined;

  const handleSubmit = (values) => {
    dispatch(
      slaughterUpdateNoneRecieptService({
        non_receipt: true,
        main_non_receipt: true,
        non_receipt_message: values.message,
        key: item.key,
        role: getRoleFromUrl(),
      })
    ).then((r) => {
      dispatch(CLOSE_MODAL());
      if (r.payload.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        handleClose();
        updateTable();
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "عملیات عدم وصول با موفقیت انجام شد.",
          severity: "success",
        });
      }
    });
  };

  return (
    <Grid>
      <IconButton
        aria-describedby={id}
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        <TuneIcon />
      </IconButton>
      <Popover
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <Grid style={{ padding: "20px" }} container direction="column">
          <Tooltip title="ورود اطلاعات بار" placement="right">
            <IconButton
              color="primary"
              disabled={
                item?.documentStatus === "بدون مشکل" ||
                item?.documentStatus === "بدون مشکل فاقد کیفیت"
              }
              onClick={() => {
                handleClose();
                dispatch(
                  DRAWER({
                    title: "انجام عملیات",
                    top: !(window.innerWidth <= 600),
                    bottom: window.innerWidth <= 600,
                    content: (
                      <SlaughterEnterBarWeight
                        item={item}
                        updateTable={updateTable}
                      />
                    ),
                  })
                );
              }}
            >
              <EditIcon />
            </IconButton>
          </Tooltip>
          <Tooltip title={"عدم وصول"} placement="right">
            <IconButton
              disabled={item?.allocatedQuantity > 0}
              onClick={() => {
                handleClose();
                dispatch(
                  OPEN_MODAL({
                    title: "عدم وصول",
                    content: (
                      <SlaughterEnterInformationModal
                        handleSubmit={handleSubmit}
                        item={item}
                      />
                    ),
                  })
                );
              }}
              aria-label="delete"
              color="primary"
            >
              <ReceiptLongIcon />
            </IconButton>
          </Tooltip>
        </Grid>
      </Popover>
    </Grid>
  );
};
