// @flow
import { type Node } from 'react';
import PropTypes from 'prop-types';
import type { TranslatedContent } from '../../../types';
import { translatedContentPropType } from '../../../types';

export type SearchInputProps = {
  onChange: string => void,
  handleClear?: void => void,
  searchInput?: string,
  iconPosition?: string,
  searchResults: Array<{ id: string, text: string, isSeparator?: boolean }>,
  onSearchResultClicked?: (?string, ?string) => void,
  label: TranslatedContent,
  allowNotFound?: boolean,
  notFoundText?: TranslatedContent,
  hideLabel?: boolean,
  large?: boolean,
  bold?: boolean,
  selected?: boolean,
  placeholder?: string,
  value?: string, // default value
  renderItem?: ({ id: string, text: string, isSeparator?: boolean }) => Node,
};

export const searchInputPropTypes = {
  searchInput: PropTypes.string,
  iconPosition: PropTypes.string,
  searchResults: PropTypes.arrayOf(PropTypes.object),
  onSearchResultClicked: PropTypes.func,
  label: translatedContentPropType.isRequired,
  allowNotFound: PropTypes.bool,
  notFoundText: PropTypes.string,
  hideLabel: PropTypes.bool,
  large: PropTypes.bool,
  bold: PropTypes.bool,
  hasDarkIcon: PropTypes.bool,
};
