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

export const AllDispensersOperations = ({ 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}
      >
        <div style={{ padding: "10px" }}>
          <Button
            color="primary"
            size="small"
            onClick={() => {
              handleClose();
              dispatch(
                OPEN_MODAL({
                  title: "ویرایش توزیع کننده",
                  content: (
                    <AllDispensersEditForm
                      item={item}
                      updateTable={updateTable}
                    />
                  ),
                  size: 620,
                })
              );
            }}
            startIcon={<EditIcon fontSize="small" />}
            sx={{ textTransform: "none", userSelect: "text" }}
          >
            <Typography variant="body2" sx={{ userSelect: "text" }}>
              ویرایش
            </Typography>
          </Button>
        </div>
      </Popover>
    </div>
  );
};