import {
  IconButton,
  Popover,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Typography,
} from "@mui/material";
import { useContext, useState } from "react";
import ArchiveIcon from "@mui/icons-material/Archive";
import DeleteIcon from "@mui/icons-material/Delete";
import TuneIcon from "@mui/icons-material/Tune";
import FindReplaceIcon from "@mui/icons-material/FindReplace";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { provinceChainsDeleteChain } from "../../services/province-chains-delete-chain";
import { ChainsReplaceActiveChain } from "../chain-replace-active-chain/ChainReplaceActiveChain";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { CityArchiveHatchingDrawer } from "../../../city/components/city-archive-hatching-drawer/CityArchiveHatchingDrawer";
import AddTaskIcon from "@mui/icons-material/AddTask";
import { ChainsAllocation } from "../chains-allocation/ChainsAllocation";

export const ChainsActiveChainsOperations = ({ item, updateTable }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  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",
        }}
        slotProps={{
          paper: {
            sx: {
              mt: 1,
            },
          },
        }}
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <List sx={{ p: 1 }}>
          <ListItemButton
            onClick={() => {
              handleClose();
              dispatch(
                DRAWER({
                  title: "تخصیص به زنجیره",
                  right: !(window.innerWidth <= 600),
                  bottom: window.innerWidth <= 600,
                  content: (
                    <ChainsAllocation item={item} updateTable={updateTable} />
                  ),
                })
              );
            }}
            sx={{
              borderRadius: 1,
              mb: 0.5,
              color: "primary.main",
              "&:last-of-type": {
                mb: 0,
              },
            }}
          >
            <ListItemIcon sx={{ color: "primary.main", minWidth: 36 }}>
              <AddTaskIcon sx={{ fontSize: { xs: 20, md: 18 } }} />
            </ListItemIcon>
            <ListItemText
              primary={
                <Typography
                  sx={{
                    color: "primary.main",
                    fontWeight: 600,
                    fontSize: { xs: "13px", md: "14px" },
                  }}
                >
                  تخصیص به زنجیره
                </Typography>
              }
            />
          </ListItemButton>

          <ListItemButton
            onClick={() => {
              handleClose();
              dispatch(
                DRAWER({
                  right: !(window.innerWidth <= 600),
                  bottom: window.innerWidth <= 600,
                  title: "جایگزین کردن مرغداری ",
                  content: (
                    <ChainsReplaceActiveChain
                      item={item}
                      updateTable={updateTable}
                    />
                  ),
                })
              );
            }}
            sx={{
              borderRadius: 1,
              mb: 0.5,
              color: "info.main",
              "&:last-of-type": {
                mb: 0,
              },
            }}
          >
            <ListItemIcon sx={{ color: "info.main", minWidth: 36 }}>
              <FindReplaceIcon sx={{ fontSize: { xs: 20, md: 18 } }} />
            </ListItemIcon>
            <ListItemText
              primary={
                <Typography
                  sx={{
                    color: "info.main",
                    fontWeight: 600,
                    fontSize: { xs: "13px", md: "14px" },
                  }}
                >
                  جایگزین کردن
                </Typography>
              }
            />
          </ListItemButton>

          <ListItemButton
            onClick={() => {
              handleClose();
              dispatch(
                DRAWER({
                  title: "انتقال به آرشیو",
                  right: !(window.innerWidth <= 600),
                  bottom: window.innerWidth <= 600,
                  content: (
                    <CityArchiveHatchingDrawer
                      item={item}
                      updateTable={updateTable}
                    />
                  ),
                })
              );
            }}
            sx={{
              borderRadius: 1,
              mb: 0.5,
              color: "secondary.main",
              "&:last-of-type": {
                mb: 0,
              },
            }}
          >
            <ListItemIcon sx={{ color: "secondary.main", minWidth: 36 }}>
              <ArchiveIcon sx={{ fontSize: { xs: 20, md: 18 } }} />
            </ListItemIcon>
            <ListItemText
              primary={
                <Typography
                  sx={{
                    color: "secondary.main",
                    fontWeight: 600,
                    fontSize: { xs: "13px", md: "14px" },
                  }}
                >
                  انتقال به بایگانی
                </Typography>
              }
            />
          </ListItemButton>

          <ListItemButton
            onClick={() => {
              handleClose();
              dispatch(
                provinceChainsDeleteChain({
                  type: "delete",
                  hatching_key: item?.key,
                })
              ).then((r) => {
                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  updateTable();
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            }}
            sx={{
              borderRadius: 1,
              mb: 0.5,
              color: "error.main",
              "&:last-of-type": {
                mb: 0,
              },
            }}
          >
            <ListItemIcon sx={{ color: "error.main", minWidth: 36 }}>
              <DeleteIcon sx={{ fontSize: { xs: 20, md: 18 } }} />
            </ListItemIcon>
            <ListItemText
              primary={
                <Typography
                  sx={{
                    color: "error.main",
                    fontWeight: 600,
                    fontSize: { xs: "13px", md: "14px" },
                  }}
                >
                  خروج از زنجیره
                </Typography>
              }
            />
          </ListItemButton>
        </List>
      </Popover>
    </div>
  );
};
