import {
  FormControlLabel,
  IconButton,
  Popover,
  Switch,
  Tooltip,
} from "@mui/material";
import React, { useContext, useState } from "react";
import { useDispatch } from "react-redux";
import TuneIcon from "@mui/icons-material/Tune";
import EditIcon from "@mui/icons-material/Edit";
import { Grid } from "../../../../components/grid/Grid";
import {
  provinceDeleteMovingTextService,
  provinceUpdateMobileMessagesActiveTextService,
} from "../../services/province-get-mobile-messages";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { ProvincePolicyMobileMessageSubmit } from "../province-policy-mobile-message-submit/ProvincePolicyMobileMessageSubmit";
import { AppContext } from "../../../../contexts/AppContext";
import DeleteIcon from "@mui/icons-material/Delete";

export const ProvincePolicyMobileMessageOperations = ({
  item,
  fetchApiData,
}) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);

  const [anchorEl, setAnchorEl] = useState(null);

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

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

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

  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={
                item.ProvinceInspector?.trash === true
                  ? "فعالسازی متن"
                  : "غیر فعال کردن متن"
              }
              placement="right"
            >
              <FormControlLabel
                size="small"
                label={item.active === true ? "فعال" : " غیر فعال"}
                control={
                  <Switch
                    size="small"
                    checked={item?.active}
                    onClick={() => {
                      dispatch(
                        provinceUpdateMobileMessagesActiveTextService({
                          moving_text_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);
                        }
                      });
                    }}
                  />
                }
              />
            </Tooltip>
            <Tooltip title={"ویرایش"} placement="right">
              <IconButton
                color="primary"
                onClick={() => {
                  handleClose();
                  dispatch(
                    OPEN_MODAL({
                      title: "ویرایش متن متحرک",
                      content: (
                        <ProvincePolicyMobileMessageSubmit
                          fetchApiData={fetchApiData}
                          item={item}
                          isEdit
                        />
                      ),
                    })
                  );
                }}
              >
                <EditIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title={"حذف متن"} placement="right">
              <IconButton
                aria-label="delete"
                color="error"
                onClick={() => {
                  dispatch(provinceDeleteMovingTextService(item?.id)).then(
                    (r) => {
                      if (r.payload.error) {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "مشکلی پیش آمده است",
                          severity: "error",
                        });
                      } else {
                        fetchApiData(1);

                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "عملیات با موفقیت انجام شد.",
                          severity: "success",
                        });
                      }
                    }
                  );
                }}
              >
                <DeleteIcon />
              </IconButton>
            </Tooltip>
          </Grid>
        </div>
      </Popover>
    </div>
  );
};
