import React, { useState } from "react";
import {
  IconButton,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Popover,
} from "@mui/material";
import TuneIcon from "@mui/icons-material/Tune";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { slaughterDeleteAllocatedService } from "../../../slaughter-house/services/salughter-delete-allocated";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { ProvinceDispenserStewardEditOperation } from "../province-dispenser-steward-edit-operation/ProvinceDispenserStewardEditOperation";
import { fetchSlaughterBroadcastAndProducts } from "../../../slaughter-house/services/handle-fetch-slaughter-products";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";

export const ProvinceDispenserStewardSaleInOperation = ({
  fetchApiData,
  item,
  fetchData,
  updateTable,
  priceInfo,
  // remainWeight,
  fetchDashboardData,
}) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  const handleEditClick = () => {
    handleClose(true);
    dispatch(
      OPEN_MODAL({
        title: "ویرایش تخصیص",
        content: (
          <ProvinceDispenserStewardEditOperation
            fetchData={fetchData}
            updateTable={updateTable}
            fetchApiData={fetchApiData}
            editData={item}
            priceInfo={priceInfo}
            // remainWeight={remainWeight}
            fetchDashboardData={fetchDashboardData}
          />
        ),
      })
    );
  };

  const handleDeleteClick = () => {
    dispatch(
      slaughterDeleteAllocatedService({
        steward_allocation_key: item.key,
      })
    ).then(() => {
      dispatch(
        fetchSlaughterBroadcastAndProducts({
          role_key: selectedSubUser?.key || "",
        })
      );
      fetchApiData(1);
      setAnchorEl(null);
    });
  };

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

  return (
    <Grid container>
      <IconButton
        size="small"
        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={{ minWidth: 140, p: 0.5 }}>
          <ListItemButton
            onClick={() => {
              handleClose();
              handleEditClick();
            }}
            sx={{ borderRadius: 1, mb: 0.25, py: 0.5 }}
          >
            <ListItemIcon sx={{ minWidth: 32 }}>
              <EditIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText
              primary="ویرایش"
              primaryTypographyProps={{
                sx: { fontSize: "0.82rem", fontWeight: 600 },
              }}
            />
          </ListItemButton>
          <ListItemButton
            onClick={() => {
              handleClose();
              handleDeleteClick();
            }}
            sx={{ borderRadius: 1, py: 0.5 }}
          >
            <ListItemIcon sx={{ minWidth: 32 }}>
              <DeleteIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText
              primary="حذف"
              primaryTypographyProps={{
                sx: { fontSize: "0.82rem", fontWeight: 600 },
              }}
            />
          </ListItemButton>
        </List>
      </Popover>
    </Grid>
  );
};
