import {
  Button,
  IconButton,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Popover,
  Typography,
} from "@mui/material";
import { useContext, useState } from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import TuneIcon from "@mui/icons-material/Tune";
import EditIcon from "@mui/icons-material/Edit";
import { Grid } from "../../../../components/grid/Grid";
import { useDispatch } from "react-redux";
import {
  CLOSE_MODAL,
  DRAWER,
  OPEN_MODAL,
} from "../../../../lib/redux/slices/appSlice";

import { AppContext } from "../../../../contexts/AppContext";
import { ProvincePolicyAccountsSubmitBeneficiary } from "../province-policy-accounts-submit-beneficiary/ProvincePolicyAccountsSubmitBeneficiary";
import { provincePolicyDeleteBeneficiaryAccountsSevice } from "../../services/province-policy-get-accounts";

export const ProvincePolicyAccountsOperations = ({ item, fetchData }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const [openNotif] = useContext(AppContext);

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

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

  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={{ minWidth: 140, p: 1 }}>
          <ListItemButton
            onClick={() => {
              handleClose();
              dispatch(
                DRAWER({
                  right: !(window.innerWidth <= 600),
                  bottom: window.innerWidth <= 600,
                  content: (
                    <ProvincePolicyAccountsSubmitBeneficiary
                      fetchData={fetchData}
                      item={item}
                    />
                  ),
                  title: " ویرایش حساب ذینفع",
                })
              );
            }}
          >
            <ListItemIcon>
              <EditIcon color="primary" />
            </ListItemIcon>
            <ListItemText
              primary={
                <Typography variant="body2" color="textPrimary">
                  ویرایش
                </Typography>
              }
            />
          </ListItemButton>
          <ListItemButton
            onClick={() => {
              handleClose();
              dispatch(
                OPEN_MODAL({
                  title: "حذف حساب",
                  content: (
                    <Grid
                      container
                      xs={12}
                      justifyContent="center"
                      alignItems="center"
                    >
                      <Typography variant="body2" color="red">
                        آیا از حذف حساب اطمینان دارید؟
                      </Typography>
                      <Grid
                        container
                        xs={12}
                        mt={2}
                        justifyContent="center"
                        alignItems="center"
                        spacing={2}
                      >
                        <Grid item xs={6}>
                          <Button
                            onClick={() => {
                              dispatch(
                                provincePolicyDeleteBeneficiaryAccountsSevice(
                                  item?.key
                                )
                              ).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",
                                  });
                                  fetchData();
                                  dispatch(CLOSE_MODAL());
                                }
                              });
                            }}
                            variant="contained"
                            color="error"
                            fullWidth
                          >
                            تایید
                          </Button>
                        </Grid>
                        <Grid item xs={6}>
                          <Button variant="contained" color="primary" fullWidth>
                            رد
                          </Button>
                        </Grid>
                      </Grid>
                    </Grid>
                  ),
                })
              );
            }}
          >
            <ListItemIcon>
              <DeleteIcon color="error" />
            </ListItemIcon>
            <ListItemText
              primary={
                <Typography variant="body2" color="textPrimary">
                  حذف
                </Typography>
              }
            />
          </ListItemButton>
        </List>
      </Popover>
    </Grid>
  );
};
