import {
  Button,
  FormControlLabel,
  IconButton,
  Popover,
  Switch,
  Tooltip,
  Typography,
  Box,
} from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { OPEN_MODAL, CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { ProvinceLegalGuildsForm } from "./ProvinceLegalGuildsForm";
import TuneIcon from "@mui/icons-material/Tune";

export const ProvinceLegalGuildsOperations = ({ guild, updateTable }) => {
  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 handleActivationChange = (event) => {
    const newChecked = event.target.checked;
    setChecked(newChecked);
  };

  const handleDelete = () => {
    closePopover();
    dispatch(
      OPEN_MODAL({
        title: "تایید حذف",
        size: "auto",
        content: (
          <Box sx={{ p: 2, minWidth: 300 }}>
            <Typography sx={{ mb: 3 }}>
              آیا از حذف این واحد حقوقی اطمینان دارید؟
            </Typography>
            <Grid container direction="row" justifyContent="space-between">
              <Button
                variant="outlined"
                onClick={() => dispatch(CLOSE_MODAL())}
                sx={{ width: "48%" }}
              >
                انصراف
              </Button>
              <Button
                variant="contained"
                color="error"
                onClick={() => {
                  dispatch(CLOSE_MODAL());
                }}
                sx={{ width: "48%" }}
              >
                حذف
              </Button>
            </Grid>
          </Box>
        ),
      })
    );
  };

  const handleEdit = () => {
    closePopover();
    dispatch(
      OPEN_MODAL({
        title: "ویرایش واحد حقوقی",
        content: (
          <ProvinceLegalGuildsForm
            guild={guild}
            onClose={() => dispatch(CLOSE_MODAL())}
            updateTable={updateTable}
          />
        ),
        size: window.innerWidth <= 600 ? "small" : "auto",
      })
    );
  };

  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={handleActivationChange}
                  color="primary"
                />
              }
              label={checked ? "فعال" : "غیرفعال"}
              style={{
                justifyContent: "center",
                alignItems: "center",
                display: "flex",
              }}
            />
            <Button
              color="primary"
              size="small"
              startIcon={<EditIcon />}
              sx={{ fontSize: { xs: 12, md: 15 } }}
              onClick={handleEdit}
            >
              ویرایش
            </Button>
            <Button
              size="small"
              color="error"
              startIcon={<DeleteIcon />}
              sx={{ fontSize: { xs: 12, md: 15 } }}
              onClick={handleDelete}
            >
              حذف
            </Button>
          </Grid>
        </div>
      </Popover>
    </Grid>
  );
};
