"use client";

import { useId, useState } from "react";
import { IconButton, Menu, MenuItem } from "@mui/material";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import RestoreIcon from "@mui/icons-material/Restore";
import DeleteForeverOutlinedIcon from "@mui/icons-material/DeleteForeverOutlined";
import { EyeViewIcon } from "@/components/ui/icon";

type Props = {
  actionsLabel: string;
  viewLabel: string;
  restoreLabel: string;
  deleteLabel: string;
  onView: () => void;
  onRestore: () => void;
  onDelete: () => void;
};

export function RecycleBinActions({
  actionsLabel,
  viewLabel,
  restoreLabel,
  deleteLabel,
  onView,
  onRestore,
  onDelete,
}: Props) {
  const menuId = useId();
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
  const open = Boolean(anchor);

  return (
    <>
      <IconButton
        size="small"
        aria-label={actionsLabel}
        aria-haspopup="menu"
        aria-controls={open ? menuId : undefined}
        aria-expanded={open ? "true" : undefined}
        onClick={(event) => {
          event.stopPropagation();
          setAnchor(event.currentTarget);
        }}
        sx={{
          width: 28,
          height: 28,
          borderRadius: "4px",
          color: "text.secondary",
        }}
      >
        <MoreVertIcon sx={{ fontSize: 18 }} />
      </IconButton>
      <Menu
        id={menuId}
        anchorEl={anchor}
        open={open}
        onClose={() => setAnchor(null)}
        onClick={(event) => event.stopPropagation()}
        anchorOrigin={{ vertical: "center", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        slotProps={{
          paper: {
            sx: {
              minWidth: 180,
              borderRadius: "8px",
              mt: 0.5,
              color: "text.secondary",
            },
          },
          list: {
            sx: {
              py: 0,
              "& .MuiMenuItem-root": {
                minHeight: 40,
                gap: 1,
                fontSize: 13,
              },
            },
          },
        }}
      >
        <MenuItem
          onClick={() => {
            setAnchor(null);
            onView();
          }}
        >
          <EyeViewIcon sx={{ fontSize: 18 }} />
          {viewLabel}
        </MenuItem>
        <MenuItem
          onClick={() => {
            setAnchor(null);
            onRestore();
          }}
        >
          <RestoreIcon sx={{ fontSize: 18 }} />
          {restoreLabel}
        </MenuItem>
        <MenuItem
          sx={{ color: "error.main" }}
          onClick={() => {
            setAnchor(null);
            onDelete();
          }}
        >
          <DeleteForeverOutlinedIcon sx={{ fontSize: 18 }} />
          {deleteLabel}
        </MenuItem>
      </Menu>
    </>
  );
}