import {
  Button,
  IconButton,
  Popover,
  Tooltip,
  Typography,
} from "@mui/material";
import { useState } from "react";
import TuneIcon from "@mui/icons-material/Tune";
import { useDispatch } from "react-redux";
import { DRAWER, OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { Grid } from "../../../../components/grid/Grid";
import { SlaughterHouseSubmitDispenser } from "../slaughter-house-submit-dispenser/SlaughterHouseSubmitDispenser";
import EditIcon from "@mui/icons-material/Edit";
import SubtitlesIcon from "@mui/icons-material/Subtitles";
import { SlaughterHouseDispensersAccessLevel } from "../slaughter-house-dispensers-access-level/SlaughterHouseDispensersAccessLevel";

export const SlaughterHouseDispensersOperation = ({ item, updateTable }) => {
  const dispatch = useDispatch();

  const [anchorEl, setAnchorEl] = useState(null);

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

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

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

  return (
    <div>
      <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}
      >
        <div style={{ padding: "10px" }}>
          <Grid
            container
            direction="column"
            gap={1}
            alignItems="flex-start"
            style={{ width: 180 }}
          >
            <Tooltip placement="left" title="ویرایش توزیع کننده">
              <Button
                size="small"
                color="primary"
                startIcon={<EditIcon fontSize="small" />}
                onClick={() => {
                  handleClose();
                  dispatch(
                    DRAWER({
                      title: "ویرایش توزیع کننده",
                      right: !(window.innerWidth <= 600),
                      bottom: window.innerWidth <= 600,
                      content: (
                        <SlaughterHouseSubmitDispenser
                          updateTable={updateTable}
                          isEdit
                          item={item}
                        />
                      ),
                    })
                  );
                }}
              >
                <Typography variant="body2" fontWeight={600}>
                  ویرایش توزیع کننده
                </Typography>
              </Button>
            </Tooltip>
            <Tooltip placement="left" title="تعیین سطح دسترسی توزیع کننده">
              <Button
                size="small"
                color="secondary"
                startIcon={<SubtitlesIcon fontSize="small" />}
                onClick={() => {
                  handleClose();
                  dispatch(
                    OPEN_MODAL({
                      title: "تعیین سطح دسترسی توزیع کننده",
                      content: (
                        <SlaughterHouseDispensersAccessLevel
                          updateTable={updateTable}
                          item={item}
                        />
                      ),
                    })
                  );
                }}
              >
                <Typography variant="body2" fontWeight={600}>
                  تعیین سطح دسترسی
                </Typography>
              </Button>
            </Tooltip>
          </Grid>
        </div>
      </Popover>
    </div>
  );
};
