import * as React from 'react';
import { BadgeSize, BadgeType } from '../Badge';
import { PopoverCommonProps } from '../common';
import { BadgeSelectItemProps } from '../BadgeSelectItem';

export interface BadgeSelectProps {
  /** An array of options. Each option must have a unique `id`, a `text` and a `skin` whose value should match one of `<Badge/>`'s skin values */
  options: BadgeSelectItemProps[];
  /** The id of the selected option in the list */
  selectedId?: string;
  /** Callback function called whenever the user selects a different option in the list */
  onSelect?: (option: BadgeSelectItemProps) => void;
  /** The size of the `<Badge/>`
   * @default 'medium'
   */
  size?: BadgeSize;
  /** The type of the `<Badge/>`
   * @default 'solid'
   */
  type?: BadgeType;
  /** Whether the text of the `<Badge/>` should be uppercase
   * @default true
   */
  uppercase?: boolean;
  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook?: string;
  /** common popover props */
  popoverProps?: PopoverCommonProps;
}

export default class BadgeSelect extends React.Component<BadgeSelectProps> {
  hideDropdown: () => void;
  showDropdown: () => void;
  toggleDropdown: () => void;
  getSelectedOption: (props: any) => BadgeSelectItemProps;
}

export { BadgeSelectItemProps };