import * as React from 'react';
import { FocusOptionsPolyfill, PopoverCommonProps } from '../common';
import {
  DropdownLayoutValueOption,
  DropdownLayoutProps,
} from '../DropdownLayout';
import { InputProps } from '../Input';

export interface InputWithOptionsProps<
  ManualInputFn = ManualInputFnSignature,
  OnSelectFn = OnSelectFnSignature,
>
  extends InputProps, Omit<DropdownLayoutProps, 'onSelect' | 'size'> {
  /** Controls the size of the input and its dropdown options. `tiny` and `small` inputs render `small` options, the rest render `medium` ones.
   * @default 'medium'
   */
  size?: InputProps['size'];
  /** Sets the value of the native `autocomplete` attribute of the input.
   * @default 'off'
   */
  autocomplete?: string;
  /** Use a customized input component instead of the default @wix/design-system `<Input/>` component. */
  inputElement?: React.ReactElement;
  /** Closes DropdownLayout on option selection.
   * @default true
   */
  closeOnSelect?: boolean;
  /** A callback which is called when the user performs a Submit-Action.
   * Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action.
   * `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters */
  onManuallyInput?: ManualInputFn;
  /** Function that receives an option, and should return the value to be displayed. */
  valueParser?: (
    option: DropdownLayoutValueOption,
  ) => DropdownLayoutValueOption['value'];
  /** Sets the width of the dropdown.
   * @default null
   */
  dropdownWidth?: string;
  /** Sets the offset of the dropdown from the left.
   * @default '0'
   */
  dropdownOffsetLeft?: string;
  /** Accepts any content to render in the dropdown instead of the options list. Ignored when `native` is `true`. */
  customDropdownContent?: React.ReactNode;
  /** Controls whether to show options if input is empty.
   * @default true
   */
  showOptionsIfEmptyInput?: boolean;
  /** Mark in bold word parts based on search pattern. */
  highlight?: boolean;
  /** Indicates whether to render using the native select element.
   * @default false
   */
  native?: boolean;
  /**
   * Accepts common popover props that are passed to the options dropdown popover.
   * @linkTypeTo Popover
   */
  popoverProps?: PopoverCommonProps;
  /** Defines a callback function which is called when the user selects an option from the list. When `highlight` is `true`, it receives the original option from `options`. */
  onSelect?: OnSelectFn;
  /** A callback which is called when options dropdown is shown. */
  onOptionsShow?: () => void;
  /** A callback which is called when options dropdown is hidden. */
  onOptionsHide?: () => void;
  /** Controls whether to show drawer on mobile devices.
   * @default true
   */
  showDrawerOnMobile?: boolean;
}

export class InputWithOptions<
  ManualInputFn = ManualInputFnSignature,
  OnSelectFn = OnSelectFnSignature,
  T extends InputWithOptionsProps<ManualInputFn, OnSelectFn> =
    InputWithOptionsProps<ManualInputFn, OnSelectFn>,
> extends React.Component<T> {
  /**
   * Sets focus on the input element.
   */
  focus: (options?: FocusOptionsPolyfill) => FocusOptionsPolyfill;
  /**
   * Removes focus from the input element.
   */
  blur: () => void;
  /**
   * Selects the text in the input element.
   */
  select: () => void;
  showOptions: () => void;
  hideOptions: () => void;
  /**
   * Clears the input value.
   */
  clear: (event?: React.ChangeEvent<HTMLInputElement>) => void;
}

export type ManualInputFnSignature = (
  inputValue: string,
  suggestedOption: DropdownLayoutValueOption,
) => void;

export type OnSelectFnSignature = DropdownLayoutProps['onSelect'];