// @flow
import type { Element, ComponentType, Node } from 'react';
import type { TranslatedContent } from '../../../types';
import type { SpaceProps } from '../../../mixins/spacing';
import type { StackeeProps } from '../../../mixins/stackee';
import type { StylableProps } from '../../../mixins/themes';
import type { TestingProps } from '../../../mixins/testing';
import type { FocusEvents } from '../../../mixins/focus';
import type { AriaProps } from '../../../mixins/aria';
import type { OptionProps } from './option/option.proptypes';
import type { FormFieldError } from '../internals/forms.proptypes';
import type { LabelStyle } from '../text-input';

export type SelectProps<T> = {|
  ...TestingProps,
  ...StylableProps,
  ...SpaceProps,
  ...StackeeProps,
  ...FocusEvents,
  ...TestingProps,
  ...AriaProps,
  focusOnMount?: boolean,
  children:
    | Element<ComponentType<OptionProps<T>>>
    | Array<Element<ComponentType<OptionProps<T>>>>,
  disabled?: boolean,
  error?: FormFieldError,
  onChange: (T | typeof undefined) => void,
  placeholder?: string,
  /** value is required as undefined, which will show the placeholder for you if it changes from val -> undefined */
  value: T | typeof undefined,
  label: TranslatedContent,
  name?: string,
  success?: Node,
  description?: Node,
  labelStyle?: LabelStyle,
|};
