import React, { useState } from "react";
import { IconButton, Menu, MenuItem, ListItemText } from "@mui/material";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import uiStyles from "@/styles/modules/ui.module.css";

export type RowActionItem = {
  key: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
  tone?: "default" | "danger" | "success" | "warning";
};

type RowActionsMenuProps = {
  actions: RowActionItem[];
  ariaLabel?: string;
};

const RowActionsMenu: React.FC<RowActionsMenuProps> = ({
  actions,
  ariaLabel = "Row actions",
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };

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

  if (!actions.length) {
    return (
      <div className={uiStyles.tableActionCell}>
        <span style={{ color: "#94a3b8" }}>—</span>
      </div>
    );
  }

  return (
    <div className={uiStyles.tableActionCell}>
      <IconButton
        size="small"
        aria-label={ariaLabel}
        aria-controls={open ? "row-actions-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleOpen}
        className={uiStyles.rowActionsTrigger}
      >
        <MoreVertIcon fontSize="small" />
      </IconButton>
      <Menu
        id="row-actions-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        onClick={(e) => e.stopPropagation()}
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        slotProps={{
          paper: { className: uiStyles.rowActionsMenu },
        }}
      >
        {actions.map((action) => (
          <MenuItem
            key={action.key}
            disabled={action.disabled}
            className={
              action.tone === "danger"
                ? uiStyles.rowActionDanger
                : action.tone === "success"
                  ? uiStyles.rowActionSuccess
                  : action.tone === "warning"
                    ? uiStyles.rowActionWarning
                    : undefined
            }
            onClick={() => {
              handleClose();
              action.onClick();
            }}
          >
            <ListItemText primary={action.label} />
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
};

export default RowActionsMenu;