// @flow
import type { Node } from 'react';
import type { TranslatedContent } from '../../../types';
import type { MarginOnlySpaceProps } from '../../../mixins/spacing';
import type { StackeeProps } from '../../../mixins/stackee';
import type { StylableProps } from '../../../mixins/themes';
import type { TestingProps } from '../../../mixins/testing';

export type SearchInputProps = {|
  ...StylableProps,
  ...MarginOnlySpaceProps,
  ...StackeeProps,
  ...TestingProps,
  onChange: (string) => void,
  onClear?: (void) => void,
  searchInput?: string,
  iconPosition?: string,
  searchResults: Array<{
    id: string,
    text: string,
    isSeparator?: boolean,
  }>,
  onSearchResultClicked?: (?string, ?string) => void,
  label: TranslatedContent,
  clearLabel?: TranslatedContent,
  allowNotFound?: boolean,
  showNotFoundOnlyOnNoResults?: boolean,
  notFoundText?: TranslatedContent,
  hideLabel?: boolean,
  large?: boolean,
  bold?: boolean,
  selected?: boolean,
  placeholder?: string,
  value?: string, // default value
  initialValue?: string,
  focusOnMount?: boolean,
  renderItem?: ({
    id: string,
    text: string,
    isSeparator?: boolean,
    selected?: boolean,
  }) => Node,
  renderNotFoundItem?: () => Node,
  clearSearchOnClick?: boolean,
|};
