import * as React from 'react';
import { InputWithOptionsProps } from '../InputWithOptions';
import { DropdownLayoutValueOption } from '../DropdownLayout';

export interface SearchProps extends InputWithOptionsProps {
  /** Function which returns custom node shown when no options are available. */
  renderEmptyState?: (value: InputWithOptionsProps['value']) => React.ReactNode;
  /** Specifies whether to collapse input to search icon only. Once clicked, the icon expands to a full search input.
   * @default false
   */
  expandable?: boolean;
  /** Specifies the width of an input in an  expanded state.
   * @default '100%'
   */
  expandWidth?: string | number;
  /** Specifies the direction of expansion animation when expandable is true.
   * @default 'right'
   */
  expandDirection?: 'left' | 'right';
  /** Defines a custom function for options filtering. */
  predicate?: (option: DropdownLayoutValueOption) => boolean;
  /** Specifies the `onChange` debounce in milliseconds.
   * @default 0
   */
  debounceMs?: number;
  /** Callback function that is called when the expandable input starts expanding or collapsing.
   * @param {boolean} collapsed - indicates whether the input is collapsed or expanded
   */
  onExpandTransitionStart?: (collapsed: boolean) => void;
  /** Callback function that is called when the expandable input finishes expanding or collapsing.
   * @param {boolean} collapsed - indicates whether the input is collapsed or expanded
   */
  onExpandTransitionEnd?: (collapsed: boolean) => void;
}

export class Search extends React.Component<SearchProps> {
  clear: (event?: React.ChangeEvent<HTMLInputElement>) => void;
  blur: () => void;
  focus: () => void;
}