import * as React from 'react';
import { SelectorSize, SelectorToggleTooltipProps } from '../../Selector';

export interface SelectorListItem {
  id: number | string;
  title: React.ReactNode;
  subtitle?: string;
  extraText?: string;
  extraNode?: React.ReactNode;
  disabled?: boolean;
  toggleTooltipProps?: SelectorToggleTooltipProps;
  selected?: boolean;
  indeterminate?: boolean;
  image?: React.ReactNode;
  subtitleNode?: React.ReactNode;
  belowNode?: React.ReactNode;
  showBelowNodeOnSelect?: boolean;
}

export type SelectorListSize = SelectorSize;

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

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

export type SelectorListContentProps = {
  /** applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook?: string;
  /** array of selector items to show */
  items: SelectorListItem[];
  /** Component/element that will be rendered above the list that will not be sticky, but scrollable */
  topScrollableContent?: React.ReactNode;
  /** callback to trigger when toggling a selector, receives SelectorList item */
  onToggle: (item: SelectorListItem) => void;
  /**
   * Component/element that will be 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 will get the current `searchQuery` and should return the component/element
   * that will be rendered when there are no items that suffice the entered search query
   *  */
  renderNoResults?: (searchValue: string) => React.ReactNode;
  /** whether list is loading */
  isLoading?: boolean;
  /** a function that receives an item and checks if it is selected */
  checkIsSelected: (item: SelectorListItem) => boolean;
  /** a function that receives an item and checks if it is in indeterminate mode */
  checkIndeterminate?: (item: SelectorListItem) => boolean;
  /** whether list is empty */
  isEmpty?: boolean;
  /** whether list search found no matching items */
  noResultsFound?: boolean;
  /** Controls the size of the selector list. Mostly has an effect on padding of the list and its items. */
  size?: SelectorListSize;
  /** Image icon size */
  imageSize?: SelectorListImageSize;
  /**
   * Image icon shape, `rectangular` or `circle`.<br>
   * NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
   * */
  imageShape?: SelectorListImageShape;
  /** display checkbox and allow multi selection */
  multiple?: boolean;
  showDivider?: boolean;
  /** search input value */
  searchValue: string;
  /** A callback called when more items are requested to be rendered. */
  loadMore: () => void;
  /** Whether there are more items to be loaded. */
  hasMore?: boolean;
  infiniteScrollRef?: React.Ref<any>;
};

declare const SelectorListContent: React.FC<SelectorListContentProps>;
export default SelectorListContent;
