import IconButton from "@mui/material/IconButton"
import Menu, { MenuProps } from "@mui/material/Menu"
import MenuItem from "@mui/material/MenuItem"
import MoreVertIcon from "@mui/icons-material/MoreVert"
import { MouseEvent, useState } from "react"

export interface TableRowMenuProps<TData> {
  data: TData
  menuItems: Array<{
    label: React.ReactNode
    disabled: boolean
    onClick: (data: TData) => void
  }>
}

export const TableRowMenu = <T,>({
  data,
  menuItems,
}: TableRowMenuProps<T>): JSX.Element => {
  const [anchorEl, setAnchorEl] = useState<MenuProps["anchorEl"]>(null)

  const handleClick = (event: MouseEvent) => {
    setAnchorEl(event.currentTarget)
  }

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

  return (
    <>
      <IconButton
        size="small"
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {menuItems.map((item, index) => (
          <MenuItem
            key={index}
            disabled={item.disabled}
            onClick={() => {
              handleClose()
              item.onClick(data)
            }}
          >
            {item.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  )
}
