import { call } from 'utils/call';

interface MenuOption {
  value: string;
  label: string;
  onClick: (ev?: MouseEvent) => void;
}

interface FlyoutMenuProps extends React.HTMLAttributes<HTMLDivElement> {
  options: MenuOption[];
  onDismiss?: () => void;
}

interface MenuClickHandler {
  (callback: (ev?: MouseEvent) => void): React.MouseEventHandler;
}

export const FlyoutMenu = ({
  onDismiss,
  options,
  ...props
}: FlyoutMenuProps) => {
  const handleClick: MenuClickHandler = (callback) => (ev) => {
    call(callback);
    call(onDismiss);
  };
  return (
    <div className="flyout" {...props}>
      {options.map((option) => {
        return (
          <div
            onClick={handleClick(option.onClick)}
            className="flyout-item paddingX4 flex justifyBetween"
            key={option.value}
          >
            {option.label}
          </div>
        );
      })}
    </div>
  );
};