import { IconButton, Popover, Tooltip, Box } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { useState } from "react";
import TuneIcon from "@mui/icons-material/Tune";
import { PspSubmitGuildCondition } from "../psp-submit-guild-condition/PspSubmitGuildCondition";
import { useDispatch } from "react-redux";
import EditIcon from "@mui/icons-material/Edit";
import { PspPosList } from "../psp-pos-list/PspPosList";
import { PspCreatePos } from "../psp-create-pos/PspCreatePos";
import { DRAWER, OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import AddIcon from "@mui/icons-material/Add";
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
export const PspManageGuildsOperation = ({
  item,
  // selectedAge1,
  // selectedAge2,
  updateTable,
  // readOnly,
}) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();

  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}
        color="primary"
        onClick={handleClick}
        sx={{ padding: "8px" }}
      >
        <TuneIcon fontSize="medium" />
      </IconButton>
      <Popover
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <Box sx={{ padding: "16px", minWidth: "50px" }}>
          <Grid container direction="column" spacing={2} alignItems="center">
            {/* مشاهده دستگاه‌های POS */}
            {item?.numberOfPos > 0 && (
              <Grid item>
                <Tooltip title="مشاهده جزییات دستگاه‌های POS" placement="right">
                  <IconButton
                    disabled={item?.provinceAcceptState !== "accepted"}
                    color="primary"
                    onClick={() => {
                      handleClose();
                      dispatch(
                        DRAWER({
                          title: "جزئیات  کارتخوان",
                          top: !(window.innerWidth <= 600),
                          bottom: window.innerWidth <= 600,
                          content: (
                            <PspPosList item={item} updateTable={updateTable} />
                          ),
                        })
                      );
                    }}
                  >
                    <RemoveRedEyeIcon size={24} />
                  </IconButton>
                </Tooltip>
              </Grid>
            )}

            {/* ثبت دستگاه POS */}
            <Grid item>
              <Tooltip title="ثبت دستگاه POS جدید" placement="right">
                <IconButton
                  disabled={item?.provinceAcceptState !== "accepted"}
                  color="secondary"
                  sx={{
                    fontSize: "1.5rem",
                    width: "48px",
                    height: "48px",
                    "&:hover": {
                      backgroundColor: "rgba(156, 39, 176, 0.08)",
                    },
                  }}
                  onClick={() => {
                    handleClose();
                    dispatch(
                      DRAWER({
                        title: "ایجاد دستگاه",
                        right: !(window.innerWidth <= 600),
                        bottom: window.innerWidth <= 600,
                        content: (
                          <PspCreatePos item={item} updateTable={updateTable} />
                        ),
                      })
                    );
                  }}
                >
                  <AddIcon size={24} />
                </IconButton>
              </Tooltip>
            </Grid>

            {/* توضیحات وضعیت */}
            {/* <Grid item>
              <Tooltip title="جهت مطالعه توضیحات کلیک کنید" placement="right">
                <IconButton
                  color="info"
                  sx={{
                    fontSize: "1.5rem",
                    width: "48px",
                    height: "48px",
                    "&:hover": {
                      backgroundColor: "rgba(2, 136, 209, 0.08)",
                    },
                  }}
                  onClick={() => {
                    handleClose();
                    dispatch(
                      OPEN_MODAL({
                        title: "مشاهده توضیحات",
                        content: (
                          <Typography>
                            توضیحات: {item.descriptionCondition}
                          </Typography>
                        ),
                      })
                    );
                  }}
                >
                  <Typography
                    sx={{
                      cursor: "pointer",
                      fontSize: "0.75rem",
                      fontWeight: "bold",
                    }}
                  >
                    {item.condition}
                  </Typography>
                </IconButton>
              </Tooltip>
            </Grid> */}

            {/* ثبت/ویرایش وضعیت صنف */}
            <Grid item>
              <Tooltip
                title={item?.condition ? "ویرایش وضعیت صنف" : "ثبت وضعیت صنف"}
                placement="right"
              >
                <IconButton
                  disabled={item?.provinceAcceptState !== "accepted"}
                  color="success"
                  sx={{
                    fontSize: "1.5rem",
                    width: "48px",
                    height: "48px",
                    "&:hover": {
                      backgroundColor: "rgba(46, 125, 50, 0.08)",
                    },
                  }}
                  onClick={() => {
                    handleClose();
                    dispatch(
                      OPEN_MODAL({
                        title: "ثبت توضیحات",
                        content: (
                          <PspSubmitGuildCondition
                            item={item}
                            updateTable={updateTable}
                          />
                        ),
                      })
                    );
                  }}
                >
                  <EditIcon size={24} />
                </IconButton>
              </Tooltip>
            </Grid>
          </Grid>
        </Box>
      </Popover>
    </div>
  );
};
