import React, { useContext, useState } from "react";
import {
  Button,
  FormControlLabel,
  IconButton,
  Popover,
  Switch,
} from "@mui/material";
import TuneIcon from "@mui/icons-material/Tune";
// import CancelIcon from "@mui/icons-material/Delete";
// import EditIcon from "@mui/icons-material/Edit";
import { Grid } from "../../../../components/grid/Grid";
import { useDispatch } from "react-redux";
import { ProvinceSendReportNewUser } from "../province-send-report-new-user/ProvinceSendReportNewUser";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import {
  provinceSendReportDeleteUser,
  provinceSendReportEditUser,
} from "../../services/province-send-report-new-user";
import { AppContext } from "../../../../contexts/AppContext";

export const ProvinceSendReportOperations = ({ item, fetchApiData }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [openNotif] = useContext(AppContext);

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

  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}
      >
        <Grid
          gap={1}
          style={{
            padding: "20px",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Button
            size="small"
            color="primary"
            variant="contained"
            onClick={() =>
              dispatch(
                OPEN_MODAL({
                  title: "ویرایش عضو",
                  content: (
                    <ProvinceSendReportNewUser
                      fetchApiData={fetchApiData}
                      item={item}
                      isEdit
                    />
                  ),
                })
              )
            }
          >
            ویرایش
          </Button>
          <Button
            size="small"
            color="error"
            variant="contained"
            onClick={() => {
              dispatch(provinceSendReportDeleteUser(item?.id)).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",
                  });
                  fetchApiData(1);
                }
              });
            }}
          >
            حذف
          </Button>

          <FormControlLabel
            control={
              <Switch
                defaultChecked={item?.active}
                onClick={() => {
                  dispatch(
                    provinceSendReportEditUser({
                      user_key: item?.key,
                      active: !item?.active,
                    })
                  ).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",
                      });
                      fetchApiData(1);
                    }
                  });
                }}
              />
            }
            label={item?.active ? "فعال" : "غیر فعال"}
          />
        </Grid>
      </Popover>
    </Grid>
  );
};
