import { IconButton } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { useDispatch } from "react-redux";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { useState } from "react";
// import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import TuneIcon from "@mui/icons-material/Tune";

import SupporterSettlementModal from "../supporter-settlement-modal/SupporterSettlemetModal";

export const SupporterSettlementOperation = ({
  item,
  item_key,
  updateTable_data,
}) => {
  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 (
    <Grid container>
      <IconButton
        aria-describedby={id}
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        <TuneIcon
          onClick={() => {
            handleClose();
            dispatch(
              DRAWER({
                title: "بارگزاری سند",
                top: !(window.innerWidth <= 600),
                bottom: window.innerWidth <= 600,
                size: 1000,
                content: (
                  <SupporterSettlementModal
                    item={item}
                    modal_key={item_key}
                    updateTable_modal={updateTable_data}
                  />
                ),
              })
            );
          }}
        />
      </IconButton>
    </Grid>
  );
};
