// @flow
import type { ThemeProps } from '../../../../types';
import { getPaletteColor } from '../../../../mixins/branding';
import { getFontSize } from '../../../../mixins/typography';

import type {
  BackgroundSelector,
  ContextMenuListItemProps,
} from './context-menu-list-item.proptypes';

export const getItemBackgroundColor = (selector: BackgroundSelector) => ({
  danger,
}: ContextMenuListItemProps<*>) => {
  if (danger) {
    return getPaletteColor('error-fg');
  }

  switch (selector) {
    case 'active':
      return getPaletteColor('brand-secondary-dark');
    case 'hover':
      return getPaletteColor('brand-secondary-base');
    default:
      return undefined;
  }
};

export const getItemColor = ({
  danger,
  colorName,
}: ContextMenuListItemProps<*>) => {
  const originalColor = colorName ? getPaletteColor(colorName) : 'inherit';
  return danger ? getPaletteColor('error-fg') : originalColor;
};

export const getItemFontSize = ({ theme }: ThemeProps) =>
  getFontSize({ theme, fontSize: 'f1' });
