import { useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import TuneIcon from "@mui/icons-material/Tune";
import { Button, IconButton, Popover, Tooltip } from "@mui/material";
import {
  CLOSE_MODAL,
  DRAWER,
  OPEN_MODAL,
} from "../../../../lib/redux/slices/appSlice";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import { deleteOutProvinceTrueGuilds } from "../../services/delete-out-province-true-guilds";
import { SlaughterSellCarcassOutProvinceAddBuyer } from "../../../slaughter-house/components/slaughter-sell-carcass-out-province-add-buyer/SlaughterSellCarcassOutProvinceAddBuyer";

export const ProvinceTrueGuildsOutProvinceOperations = ({
  item,
  updateTable,
}) => {
  const dispatch = useDispatch();

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

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

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

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

  const deleteGuild = () => {
    const buyerKey = item?.key;
    if (buyerKey)
      dispatch(deleteOutProvinceTrueGuilds({ buyer_key: buyerKey })).then(() =>
        dispatch(CLOSE_MODAL())
      );
  };
  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}
      >
        <div
          style={{
            padding: "10px",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Grid container direction="column">
            <Tooltip title="ویرایش" placement="right">
              <IconButton
                color="primary"
                onClick={() => {
                  handleClose();
                  dispatch(
                    DRAWER({
                      title: "ویرایش واحد",
                      right: !(window.innerWidth <= 600),
                      bottom: window.innerWidth <= 600,
                      content: (
                        <SlaughterSellCarcassOutProvinceAddBuyer
                          updateTable={updateTable}
                          isEdit
                          data={item}
                          defaultPersonType={
                            item?.buyer?.parentLegalPersonNationalCode
                              ? "legal"
                              : "real"
                          }
                          defaultNationalCode={item?.buyer?.nationalCode}
                        />
                      ),
                    })
                  );
                }}
              >
                <EditIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title="حذف" placement="right">
              <IconButton
                color="error"
                onClick={() => {
                  handleClose();
                  dispatch(
                    OPEN_MODAL({
                      title: "آیا مطمئن هستید؟",
                      size: "auto",
                      content: (
                        <Grid
                          container
                          sx={{
                            width: "300px",
                          }}
                        >
                          <Button
                            color="error"
                            sx={{
                              flex: 1,
                            }}
                            onClick={() => {
                              dispatch(CLOSE_MODAL());
                            }}
                          >
                            لغو
                          </Button>
                          <Button
                            variant="contained"
                            color="error"
                            sx={{
                              flex: 1,
                            }}
                            onClick={() => deleteGuild()}
                          >
                            تایید
                          </Button>
                        </Grid>
                      ),
                    })
                  );
                }}
              >
                <DeleteIcon />
              </IconButton>
            </Tooltip>
          </Grid>
        </div>
      </Popover>
    </Grid>
  );
};
