import { IconButton, Popover, Typography, Button } from "@mui/material";
import React, { useState, useContext } from "react";
import TuneIcon from "@mui/icons-material/Tune";
import ToggleOnIcon from "@mui/icons-material/ToggleOn";
import ToggleOffIcon from "@mui/icons-material/ToggleOff";
import BlockIcon from "@mui/icons-material/Block";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { slaughterEditDelegatesService } from "../../services/slaughter-get-delegates-service";
import { DelegatesLimitationForm } from "./DelegatesLimitationForm";

export const DelegatesOperations = ({ item, updateTable }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

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

  const isActive = item?.active !== undefined ? item.active : !item?.trash;

  const handleToggleActive = () => {
    handleClose();
    dispatch(
      slaughterEditDelegatesService({
        key: item?.key,
        active: !isActive,
      })
    ).then((r) => {
      if (r.payload?.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "عملیات با موفقیت انجام شد.",
          severity: "success",
        });
        if (updateTable) {
          updateTable();
        }
      }
    });
  };

  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",
            display: "flex",
            flexDirection: "column",
            gap: "8px",
          }}
        >
          <Button
            color={isActive ? "error" : "success"}
            size="small"
            onClick={handleToggleActive}
            startIcon={
              isActive ? (
                <ToggleOffIcon fontSize="small" />
              ) : (
                <ToggleOnIcon fontSize="small" />
              )
            }
            sx={{ textTransform: "none", userSelect: "text" }}
          >
            <Typography variant="body2" sx={{ userSelect: "text" }}>
              {isActive ? "غیرفعال کردن" : "فعال کردن"}
            </Typography>
          </Button>
          <Button
            color="primary"
            size="small"
            onClick={() => {
              handleClose();
              dispatch(
                OPEN_MODAL({
                  title: "تنظیم محدودیت فروش",
                  content: (
                    <DelegatesLimitationForm
                      item={item}
                      updateTable={updateTable}
                    />
                  ),
                  size: 400,
                })
              );
            }}
            startIcon={<BlockIcon fontSize="small" />}
            sx={{ textTransform: "none", userSelect: "text" }}
          >
            <Typography variant="body2" sx={{ userSelect: "text" }}>
              تنظیم محدودیت
            </Typography>
          </Button>
        </div>
      </Popover>
    </div>
  );
};
