import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  IconButton,
  Popover,
  Tooltip,
} from "@mui/material";
import { useContext, useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import TuneIcon from "@mui/icons-material/Tune";
import { AppContext } from "../../../../contexts/AppContext";
import { activateReturnedRequest } from "../../services/activate-returned-request";
import { activateReturnedCargo } from "../../services/activate-returned-cargo";
import { SPACING } from "../../../../data/spacing";

export const ProvinceReturnPurchasesOperations = ({
  item,
  updateTable,
  type = "allocated",
}) => {
  const dispatch = useDispatch();
  const [anchorEl, setAnchorEl] = useState(null);
  const [openDialog, setOpenDialog] = useState(false);
  const [openNotif] = useContext(AppContext);

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

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

  const handleOpenDialog = () => {
    setOpenDialog(true);
  };

  const handleCloseDialog = () => {
    setOpenDialog(false);
  };

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

  const handleActivate = () => {
    handleCloseDialog();
    const activateAction =
      type === "cargo" ? activateReturnedCargo : activateReturnedRequest;

    dispatch(
      activateAction({
        key: item?.key,
      })
    ).then((r) => {
      if (r.payload?.error || r.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "مشکلی پیش آمده است!",
          severity: "error",
        });
      } else {
        handleClose();
        updateTable();
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "عملیات با موفقیت انجام شد.",
          severity: "success",
        });
      }
    });
  };

  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}
      >
        <div style={{ padding: "20px" }}>
          <Grid container direction="column">
            <Tooltip title={"فعال کردن"} placement="left-start">
              <Button
                aria-label="activate"
                color="success"
                variant="text"
                onClick={handleOpenDialog}
                startIcon={<CheckCircleIcon />}
              >
                فعال کردن
              </Button>
            </Tooltip>
          </Grid>
        </div>
      </Popover>

      <Dialog
        open={openDialog}
        onClose={handleCloseDialog}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"تایید فعال سازی"}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            آیا از فعال سازی این تخصیص بازگشتی اطمینان دارید؟
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Grid container gap={SPACING.TINY} justifyContent="center" xs={12}>
            <Button
              variant="outlined"
              color="error"
              onClick={handleCloseDialog}
            >
              انصراف
            </Button>
            <Button
              variant="contained"
              color="success"
              onClick={handleActivate}
              autoFocus
            >
              تایید
            </Button>
          </Grid>
        </DialogActions>
      </Dialog>
    </div>
  );
};
