// @flow
import type { StatelessFunctionalComponent } from 'react';
import type { TranslatedContent } from '../../../types';
import type { ColorPaletteColorNameKey } from '../../../mixins/branding';
import type { TestingProps } from '../../../mixins/testing';
import type { AriaProps } from '../../../mixins/aria';

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,
  'aria-label'?: string,
|};

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