// @flow
import PropTypes from 'prop-types';
import type { StatelessFunctionalComponent } from 'react';
import {
  translatedContentPropType,
  type TranslatedContent,
} from '../../../types';
import {
  brandPropTypes,
  type ColorPaletteColorNameKey,
} from '../../../mixins/branding';

export type ContextMenuItem<Id: string> = {
  id: Id,
  label: TranslatedContent,
  textColorName?: ColorPaletteColorNameKey,
  danger?: boolean,
  onSelect: (item: ContextMenuItem<Id>) => void,
};

export type TriggerButtonProps = {
  onClick: (event: SyntheticEvent<HTMLElement>) => void,
};

export type ContextMenuProps = {
  TriggerButton?: StatelessFunctionalComponent<TriggerButtonProps>,
  justify?: 'left' | 'right',
  isLoading?: boolean,
  items: ContextMenuItem<*>[],
};

export const contextMenuPropTypes = {
  TriggerButton: PropTypes.func,
  justify: PropTypes.oneOf(['left', 'right']),
  items: PropTypes.arrayOf(
    PropTypes.shape({
      label: translatedContentPropType,
      textColorName: brandPropTypes().colorName,
      onSelect: PropTypes.func.isRequired,
    }),
  ).isRequired,
  isLoading: PropTypes.bool,
};
