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

export const SlaughterManageDelegatesOperations = ({ 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;

  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}
      >
        <Box
          style={{
            padding: "10px",
            display: "flex",
            flexDirection: "column",
            gap: "8px",
          }}
        >
          <Button
            color="primary"
            size="small"
            onClick={() => {
              handleClose();
              dispatch(
                OPEN_MODAL({
                  title: "ویرایش نماینده",
                  content: (
                    <SlaughterManageDelegatesForm
                      item={item}
                      updateTable={updateTable}
                      isEdit
                    />
                  ),
                  size: 300,
                })
              );
            }}
            startIcon={<EditIcon fontSize="small" />}
            sx={{ textTransform: "none", userSelect: "text" }}
          >
            <Typography variant="body2" sx={{ userSelect: "text" }}>
              ویرایش
            </Typography>
          </Button>
          <Button
            color="primary"
            size="small"
            onClick={() => {
              handleClose();
              dispatch(
                OPEN_MODAL({
                  title: "تنظیم محدودیت فروش",
                  content: (
                    <SlaughterManageDelegatesLimitationForm
                      item={item}
                      updateTable={updateTable}
                    />
                  ),
                  size: 400,
                })
              );
            }}
            startIcon={<BlockIcon fontSize="small" />}
            sx={{ textTransform: "none", userSelect: "text" }}
          >
            <Typography variant="body2" sx={{ userSelect: "text" }}>
              تنظیم محدودیت
            </Typography>
          </Button>
        </Box>
      </Popover>
    </div>
  );
};
