import {
  Button,
  FormControlLabel,
  IconButton,
  Popover,
  Switch,
  Tooltip,
} from "@mui/material";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { provinceChangeActiveStewardService } from "../../services/province-change-active-steward";
import { EditStewards } from "../edit-stewards/EditStewards";
import EditIcon from "@mui/icons-material/Edit";
import TuneIcon from "@mui/icons-material/Tune";

export const ManageStewardsOperations = ({ guild }) => {
  const dispatch = useDispatch();
  const [checked, setChecked] = useState(guild.active);
  const [popoverOpen, setPopoverOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  const openPopover = (event) => {
    setPopoverOpen(true);
    setAnchorEl(event.currentTarget);
  };

  const closePopover = () => {
    setPopoverOpen(false);
    setAnchorEl(null);
  };

  const handleChange = (event) => {
    setChecked(event.target.checked);
    dispatch(
      provinceChangeActiveStewardService({
        steward_key: guild?.key,
        active: event.target.checked,
      })
    );
  };

  return (
    <Grid>
      <Tooltip title="مدیریت متصدی" placement="left">
        <IconButton color="primary" onClick={openPopover}>
          <TuneIcon />
        </IconButton>
      </Tooltip>

      <Popover
        open={popoverOpen}
        anchorEl={anchorEl}
        onClose={closePopover}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
      >
        <div style={{ padding: 10 }}>
          <Grid
            container
            direction="column"
            alignItems="flex-start"
            justifyContent="center"
            gap={1}
          >
            <FormControlLabel
              control={
                <Switch
                  checked={checked}
                  onChange={handleChange}
                  color="primary"
                />
              }
              label={checked ? "فعال" : "غیرفعال"}
              style={{
                justifyContent: "center",
                alignItems: "center",
                display: "flex",
              }}
            />
            <Button
              size="small"
              color="primary"
              startIcon={<EditIcon />}
              sx={{ fontSize: { xs: 12, md: 15 } }}
              onClick={() => {
                closePopover();
                dispatch(
                  DRAWER({
                    right: !(window.innerWidth <= 600),
                    bottom: window.innerWidth <= 600,
                    title: "اعمال محدودیت",
                    content: <EditStewards guild={guild} />,
                  })
                );
              }}
            >
              اعمال محدودیت
            </Button>
          </Grid>
        </div>
      </Popover>
    </Grid>
  );
};
