import * as React from 'react';

export type ModalSelectorLayoutSingleProps = {
  /** OK button callback, called with the currently selected item. */
  onOk?: (selectedItem: ModalSelectorLayoutItem) => void;
  /** Specifies whether to display checkboxes and allow selecting multiple items. */
  multiple?: false;
};

export type ModalSelectorLayoutMultipleProps = {
  /** OK button callback, called with the currently selected item. */
  onOk?: (selectedItems: ModalSelectorLayoutItem[]) => void;
  /** Specifies whether to display checkboxes and allow selecting multiple items. */
  multiple: true;
};

export type ModalSelectorLayoutProps = ModalSelectorLayoutCommonProps &
  (ModalSelectorLayoutSingleProps | ModalSelectorLayoutMultipleProps);

export type ModalSelectorLayoutCommonProps = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Title of the modal.
   * @default 'Choose Your Items'
   */
  title?: React.ReactNode;
  /** Fixed text displayed above the list. */
  subtitle?: React.ReactNode;
  /** X button callback. */
  onClose?: React.MouseEventHandler<HTMLButtonElement>;
  /** Cancel button callback. */
  onCancel?: React.MouseEventHandler<HTMLButtonElement>;
  /**
   * paging function that should have a signature of
   * ```typescript
   * (searchQuery: string, offset: number, limit: number) =>
   * Promise<{
   *  items: Array<{
   *    id: number | string,
   *    title: node,
   *    subtitle?: string,
   *    extraText?: string,
   *    extraNode?: node,
   *    disabled?: boolean // show item as disabled, dont count it in "select all", exclude from `onOk`
   *    selected?: boolean // force item as selected
   *    image?: node
   *    subtitleNode?: node,
   *    belowNode?: node,
   *    showBelowNodeOnSelect?: boolean,
   *  }>,
   *  totalCount: number
   * }>
   * ```
   * `offset` - next requested item's index<br>
   * `limit` - number of items requested<br>
   * `totalCount` - total number of items that suffice the current search query.
   * */
  dataSource: ModalSelectorLayoutDatasourceFn;
  /** Cancel button's text.
   * @default 'Cancel'
   */
  cancelButtonText?: string;
  /** OK button's text.
   * @default 'Select'
   */
  okButtonText?: string;
  /** Image icon size.
   * @default 'large'
   */
  imageSize?: ModalSelectorLayoutImageSize;
  /**
   * Image icon shape, `rectangular` or `circle`.<br>
   * NOTE: `circle` isn't compatible with `imageSize` of `portrait` or `cinema`
   *
   * @default 'rectangular'
   */
  imageShape?: ModalSelectorLayoutImageShape;
  /** Placeholder text of the search input.
   * @default 'Search...'
   */
  searchPlaceholder?: string;
  /**
   * Component/element that is rendered when there is nothing to display,
   * i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`
   * */
  emptyState?: React.ReactNode;
  /**
   * Function that gets the current `searchQuery` and should return the component/element
   * that is rendered when there are no items that suffice the entered search query.
   *  */
  noResultsFoundStateFactory?: (searchValue: string) => React.ReactNode;
  /** Number of items loaded each time the user scrolls down.
   * @default 50
   */
  itemsPerPage?: number;
  /** Whether to display the search input or not.
   * @default true
   */
  withSearch?: boolean;
  /** Search debounce in milliseconds. */
  searchDebounceMs?: number;
  /** Height CSS property, sets the height of the modal.
   * @default '100%'
   */
  height?: string;
  /** Max-height CSS property, sets the maximum height of the modal.
   * @default '100%'
   */
  maxHeight?: string;
  /** Has no effect.
   * @deprecated Has no effect. Remove it.
   */
  selectAllText?: string;
  /** Has no effect.
   * @deprecated Has no effect. Remove it.
   */
  deselectAllText?: string;
  /** Specifies whether the OK button is disabled.
   * @default false
   */
  disableConfirmation?: boolean;
  /** Defines a callback function which is called when an item is selected or deselected. Receives the toggled item object. */
  onSelect?: (item: ModalSelectorLayoutItem) => void;
  /** Used to display some side component in the footer.
   * Overrides the select all element in the footer when multiple=true. */
  sideActions?: React.ReactNode;
};

export class ModalSelectorLayout extends React.PureComponent<ModalSelectorLayoutProps> {}

export type ModalSelectorLayoutDatasourceFn = (
  searchQuery: string,
  offset: number,
  limit: number,
) => Promise<{ items: ModalSelectorLayoutItem[]; totalCount: number }>;

export interface ModalSelectorLayoutItem {
  id: number | string;
  /** Title of the modal.
   * @default 'Choose Your Items'
   */
  title: React.ReactNode;
  /** Fixed text displayed above the list. */
  subtitle?: string;
  extraText?: string;
  extraNode?: React.ReactNode;
  disabled?: boolean;
  selected?: boolean;
  image?: React.ReactNode;
  subtitleNode?: React.ReactNode;
  belowNode?: React.ReactNode;
  showBelowNodeOnSelect?: boolean;
}

export type ModalSelectorLayoutImageSize =
  | 'tiny'
  | 'small'
  | 'portrait'
  | 'large'
  | 'cinema';

export type ModalSelectorLayoutImageShape = 'rectangular' | 'circle';