import { IconButton, Popover, Typography, Button } from "@mui/material";
import React, { useState } from "react";
import TuneIcon from "@mui/icons-material/Tune";
import BlockIcon from "@mui/icons-material/Block";
import { useDispatch } from "react-redux";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { SlaughterManageDispensersLimitationForm } from "./SlaughterManageDispensersLimitationForm";

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

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

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

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

  const handleOpenLimitationModal = () => {
    handleClose();
    dispatch(
      OPEN_MODAL({
        title: "تنظیم محدودیت فروش",
        content: (
          <SlaughterManageDispensersLimitationForm
            item={item}
            updateTable={updateTable}
          />
        ),
        size: 400,
      })
    );
  };

  return (
    <div>
      <IconButton
        aria-describedby={id}
        variant="contained"
        color="primary"
        onClick={handleClick}
        size="small"
      >
        <TuneIcon fontSize="small" />
      </IconButton>
      <Popover
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <div style={{ padding: "10px" }}>
          <Button
            color="primary"
            size="small"
            onClick={handleOpenLimitationModal}
            startIcon={<BlockIcon fontSize="small" />}
            sx={{ textTransform: "none", userSelect: "text" }}
          >
            <Typography variant="body2" sx={{ userSelect: "text" }}>
              تنظیم محدودیت
            </Typography>
          </Button>
        </div>
      </Popover>
    </div>
  );
};

