import { useState } from "react";
import { useDispatch } from "react-redux";
import { stewardDeleteSegmentService } from "../services/steward-segment-delete-operation";
import {
  IconButton,
  Popover,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  Typography,
} from "@mui/material";
import { DRAWER } from "../../../lib/redux/slices/appSlice";
import { StewardSegmentSubmitOperation } from "./StewardSegmentSubmitOperation";
import TuneIcon from "@mui/icons-material/Tune";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";

export const StewardSegmentOperation = ({ item, updateTable, productKey }) => {
  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;

  const handleDelete = () => {
    handleClose();
    dispatch(stewardDeleteSegmentService(item.key)).then(() => {
      updateTable();
    });
  };

  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}
      >
        <List sx={{ p: 1 }}>
          <ListItem disablePadding>
            <ListItemButton
              sx={{ color: "primary.main" }}
              onClick={() => {
                handleClose();
                dispatch(
                  DRAWER({
                    right: !(window.innerWidth <= 600),
                    bottom: window.innerWidth <= 600,
                    title: "ویرایش  قطعه بندی",
                    content: (
                      <StewardSegmentSubmitOperation
                        item={item}
                        updateTable={updateTable}
                        editData={item}
                        productKey={productKey}
                      />
                    ),
                  })
                );
              }}
            >
              <ListItemIcon sx={{ minWidth: 36, color: "inherit" }}>
                <EditOutlinedIcon fontSize="small" />
              </ListItemIcon>
              <Typography variant="body2">ویرایش</Typography>
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton sx={{ color: "error.main" }} onClick={handleDelete}>
              <ListItemIcon sx={{ minWidth: 36, color: "inherit" }}>
                <DeleteOutlineOutlinedIcon fontSize="small" />
              </ListItemIcon>
              <Typography variant="body2" color="inherit">
                حذف
              </Typography>
            </ListItemButton>
          </ListItem>
        </List>
      </Popover>
    </div>
  );
};
