import { ListItemText, MenuItem } from "@mui/material";
import React, { FC, useRef } from "react";
import { AreaMenu, Area, Menu as MenuArea } from "..";
import { IconButton } from "../IconButton";
import { Types } from "./types";
import './styles.scss';
//build a menu with options
export const MenuComponent: FC<Types> = ({
  isDisable = false,
  key,
  onClick,
  options,
  value,
  className,
  classNameItem,
  icon = "more_vert_icon",
  placement = "bottom"
}) => {
  const areaMenuRef: { current: { close: () => void } } = useRef<any>(null);
  return (
    <AreaMenu 
      ref={areaMenuRef} 
      key={key} 
      isDisabled={isDisable} 
      id="menuComponent" 
      menuPlacement={placement}
    >
      <Area>
        <IconButton
          onClick={() => {}}
          size="small"
          icon={icon}
          isDisabled={isDisable}
          className={className}
          style={{
            color: 'black'
          }}
        />
      </Area>
      
      <MenuArea>
          {options.map((option: any, key: any) => {
            return (
              <MenuItem
                onClick={() => {
                  onClick(option, value);
                  areaMenuRef.current.close();
                }}
                disabled={option?.disabled || false}
                key={key}
              >
                <ListItemText
                  primary={option?.name || option}
                  className={` ${classNameItem || ""}`}
                />
              </MenuItem>
            );
          })}
        </MenuArea>
    </AreaMenu>
  );
};
