import React, { useContext, useState } from "react";
import {
  Button,
  IconButton,
  Popover,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Typography,
} from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import TuneIcon from "@mui/icons-material/Tune";
import DeleteIcon from "@mui/icons-material/Delete";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import {
  CLOSE_MODAL,
  DRAWER,
  OPEN_MODAL,
} from "../../../../lib/redux/slices/appSlice";
import { ProvinceSubSectorCitySharesDepositsSubmit } from "../province-sub-sector-city-shares-deposits-submit/ProvinceSubSectorCitySharesDepositsSubmit";
import { AppContext } from "../../../../contexts/AppContext";
import { provinceSubSectorCitySharesWageDetailsDeleteDepositService } from "../../services/province-sub-sectors-services";

export const ProvinceSubSectorCitySharesDepositsDepositsOperations = ({
  item,
  updateTable,
  type,
}) => {
  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 [openNotif] = useContext(AppContext);

  const handleEdit = () => {
    handleClose();
    dispatch(
      DRAWER({
        title: "ویرایش واریزی",
        right: !(window.innerWidth <= 600),
        bottom: window.innerWidth <= 600,
        content: (
          <ProvinceSubSectorCitySharesDepositsSubmit
            item={item}
            updateTable={updateTable}
            isEdit
            type={type}
          />
        ),
      })
    );
  };

  const handleDelete = () => {
    handleClose();
    dispatch(
      OPEN_MODAL({
        title: "آیا مطمئن هستید؟",
        content: (
          <Grid container>
            <Button
              variant="contained"
              onClick={() => {
                dispatch(
                  provinceSubSectorCitySharesWageDetailsDeleteDepositService(
                    item?.key
                  )
                ).then((r) => {
                  updateTable();
                  if (r.payload.error) {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: r.payload.error,
                      severity: "error",
                    });
                  } else {
                    dispatch(CLOSE_MODAL());

                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "عملیات با موفقیت انجام شد.",
                      severity: "success",
                    });
                  }
                });
              }}
            >
              تایید
            </Button>
            <Button
              onClick={() => {
                dispatch(CLOSE_MODAL());
              }}
            >
              لغو
            </Button>
          </Grid>
        ),
      })
    );
  };

  const options = [
    {
      key: "edit",
      label: "ویرایش",
      color: "primary.main",
      icon: <EditIcon sx={{ fontSize: { xs: 20, md: 18 } }} />,
      action: handleEdit,
    },
    {
      key: "delete",
      label: "حذف",
      color: "error.main",
      icon: <DeleteIcon sx={{ fontSize: { xs: 20, md: 18 } }} />,
      action: handleDelete,
    },
  ];

  return (
    <Grid container>
      <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 }}>
          {options.map((option) => (
            <ListItemButton
              key={option.key}
              onClick={option.action}
              sx={{
                borderRadius: 1,
                mb: 0.5,
                color: option.color,
                "&:last-of-type": {
                  mb: 0,
                },
              }}
            >
              <ListItemIcon sx={{ color: option.color, minWidth: 36 }}>
                {option.icon}
              </ListItemIcon>
              <ListItemText
                primary={
                  <Typography
                    sx={{
                      color: option.color,
                      fontWeight: 600,
                      fontSize: { xs: "13px", md: "14px" },
                    }}
                  >
                    {option.label}
                  </Typography>
                }
              />
            </ListItemButton>
          ))}
        </List>
      </Popover>
    </Grid>
  );
};
