import InputWithOptions, {
  ManualInputFnSignature,
  InputWithOptionsProps,
} from '../InputWithOptions';
import {
  DropdownLayoutValueOption,
  DropdownLayoutProps,
} from '../DropdownLayout';

export interface MultiSelectCheckboxProps extends InputWithOptionsProps<
  ManualInputFnSignature,
  MultiSelectOnSelectFnSignature
> {
  /** Specifies an array of selected options ids  */
  selectedOptions?: DropdownLayoutProps['selectedId'][];
  /** Defines a callback function called on option deselect. Function receives the id of the unselected option as the first argument, and the actual option object as the second argument. */
  onDeselect?: (
    /** Assigns an unique identifier for the root element */
    id: DropdownLayoutValueOption['id'],
    option: DropdownLayoutValueOption,
  ) => void;
  /** Specifies the delimiter symbol to be displayed between the selected options in the input
   * @default ', '
   */
  delimiter?: string;
  /** Sets whether to enable search in the dropdown
   * @default false
   */
  enableSearch?: boolean;
  /** Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. */
  emptyStateMessage?: React.ReactNode;
  /** Defines a custom function for options filtering */
  predicate?: (option: DropdownLayoutValueOption) => boolean;
  /** Defines a callback function to get the text for the selected options */
  getSelectedOptionsText?: (selectedOptionsCount: number) => string;
}

export default class MultiSelectCheckbox extends InputWithOptions<
  ManualInputFnSignature,
  MultiSelectOnSelectFnSignature,
  MultiSelectCheckboxProps
> {}

export type MultiSelectOnSelectFnSignature = (
  /** Assigns an unique identifier for the root element */
  id: DropdownLayoutValueOption['id'],
  option: DropdownLayoutValueOption,
) => void;