import { css } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import { Elevation } from '../styles/defaults/elevation.styles';

interface MenuOption {
  id: string;
  label: string;
  action: () => void;
  disabled?: boolean;
}
export const PortalMenuOptions: React.FC<{
  options: MenuOption[];
}> = observer(({ options }) => {
  const { theme } = useApphouse();
  const { colors, tokens, styles } = theme;
  return (
    <div
      {...css(
        {
          display: 'grid',
          backgroundColor: colors.surface10,
          padding: tokens.spacings.m,
          zIndex: tokens.zIndex.popup,
          borderRadius: tokens.radius.default,
          gridGap: tokens.spacings.default
        },
        Elevation.depth4
      )}
    >
      {options.map((option) => {
        return (
          <button
            disabled={option.disabled}
            key={option.id}
            {...css(styles.button.clear, {})}
            onClick={() => {
              if (!option.disabled) {
                option.action();
              }
            }}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
});