import React, { useContext, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { IconButton, Popover, Tooltip } from "@mui/material";
import TuneIcon from "@mui/icons-material/Tune";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { SlaughterSubmitExport } from "../slaughter-submit-export/SlaughterSubmitExport";
import EditIcon from "@mui/icons-material/Edit";
import { useDispatch } from "react-redux";
import { slaughterDeleteFreeBuyService } from "../../services/slaughter-delete-free-buy";
import { AppContext } from "../../../../contexts/AppContext";
import DeleteIcon from "@mui/icons-material/Delete";

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

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

  const [openNotif] = useContext(AppContext);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

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

  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: "20px",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Grid container direction="column">
            <Tooltip title="ویرایش" placement="right">
              <IconButton
                color="primary"
                onClick={() => {
                  handleClose();
                  dispatch(
                    DRAWER({
                      title: "ویرایش درخواست صادرات",
                      content: (
                        <SlaughterSubmitExport
                          updateTable={updateTable}
                          edit
                          item={item}
                        />
                      ),
                      right: !(window.innerWidth <= 600),
                      bottom: window.innerWidth <= 600,
                    })
                  );
                }}
              >
                <EditIcon />
              </IconButton>
            </Tooltip>

            <Tooltip title="حذف">
              <IconButton
                color="error"
                onClick={() => {
                  dispatch(slaughterDeleteFreeBuyService(item.key)).then(
                    (r) => {
                      if (r.error) {
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: r.error,
                          severity: "error",
                        });
                      } else {
                        updateTable();
                        openNotif({
                          vertical: "top",
                          horizontal: "center",
                          msg: "عملیات با موفقیت انجام شد.",
                          severity: "success",
                        });
                      }
                    }
                  );
                }}
              >
                <DeleteIcon />
              </IconButton>
            </Tooltip>

            {/* <Tooltip title="خروجی اکسل" placement="left">
                <a
                  href={`${axios.defaults.baseURL}bar_for_each_persion_excel/?code=${item.barCode}`}
                  rel="noreferrer"
                >
                  <Button color="success">
                    <RiFileExcel2Fill size={20} />
                  </Button>
                </a>
              </Tooltip> */}
          </Grid>
        </div>
      </Popover>
    </Grid>
  );
};
