import React, { useContext, useState } from "react";
import { Button, IconButton, Popover } from "@mui/material";
import TuneIcon from "@mui/icons-material/Tune";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { Grid } from "../../../../components/grid/Grid";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { slaughterDeleteAllocatedService } from "../../services/salughter-delete-allocated";
import { SlaughterAllocateToGuild } from "../slaughter-allocate-to-guild/SlaughterAllocateToGuild";

export const SlaughterColdHouseBarsOperations = ({
  fetchApiData,
  item,
  fetchData,
  updateTable,
  priceInfo,
  remainWeight,
}) => {
  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 [openNotif] = useContext(AppContext);

  const dispatch = useDispatch();

  return (
    <Grid container>
      <IconButton
        disabled={item?.registrationCode}
        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}
      >
        <div
          style={{
            padding: "20px",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Grid container direction="column" gap={1}>
            <Button
              variant="outlined"
              onClick={() => {
                handleClose();

                dispatch(
                  OPEN_MODAL({
                    title: "ویرایش تخصیص",
                    content: (
                      <SlaughterAllocateToGuild
                        updateTable={fetchData}
                        fetchApiData={fetchApiData}
                        sellerType={"ColdHouse"}
                        sellType="exclusive"
                        coldHouseItemKey={item?.key}
                        priceInfo={priceInfo}
                        editData={item}
                        remainWeight={remainWeight}
                      />
                    ),
                  })
                );
              }}
            >
              ویرایش
            </Button>

            <Button
              size="small"
              disabled={item?.registrationCode}
              variant="outlined"
              color="error"
              onClick={() => {
                handleClose();
                dispatch(
                  slaughterDeleteAllocatedService({
                    steward_allocation_key: item.key,
                  })
                ).then((r) => {
                  if (r.error) {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: r.payload.error,
                      severity: "error",
                    });
                  } else {
                    fetchApiData(1);
                    fetchData();
                    updateTable();
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "عملیات با موفقیت انجام شد.",
                      severity: "success",
                    });
                  }
                });
              }}
            >
              حذف
            </Button>
          </Grid>
        </div>
      </Popover>
    </Grid>
  );
};
