import { IEmojiIcon } from '@vev/utils';
import { FormFieldProps } from '../silke-form';
import { SilkeIcons } from '../silke-icon';

/**
 * Defines data for the Autocomplete
 */
export interface Data<T> {
  /**
   * Item will be in the list, but not selectable
   */
  disabled?: boolean;
  divider?: false | undefined;
  /**
   * Shouldn't be shown, but can contain searchable text. Include things like tags/meta data.
   */
  extra?: string;
  /**
   * Image URL
   */
  image?: string;
  icon?: IEmojiIcon | SilkeIcons;
  label: string;
  /**
   * Description
   */
  subLabel?: string;
  value: T;
  /**
   * Group label for the item (creates optionGroup)
   */
  groupLabel?: string;
}

export interface Divider {
  image?: string;
  icon?: IEmojiIcon | SilkeIcons;
  label?: string;
  subLabel?: string;
  divider: true;
  value?: undefined;
  disabled?: boolean;
}

export type Entry<T> = Divider | Data<T>;

/**
 * Type for multicomplete
 */
export interface MultiProps<T> extends FormFieldProps<T[]> {
  maxItems?: number;
  minItems?: number;
  multiple: true;
  /** Number of items to show before collapsing into single tag  */
  showMaxTags?: number;
}

/**
 * Type for normal autocomplete
 */
export interface SingleProps<T> extends FormFieldProps<T> {
  multiple?: false;
  showMaxTags?: undefined;
}