import { Slot } from 'vue';
import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
import { ClassComponent, HintedString } from '../ts-helpers.d';

export type ObjectBadge = {
  text: string;
  severity: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
  tooltip?: string;
};

export interface BadgeGroupProps
  extends Omit<BadgeProps, 'label' | 'disabled' | 'removable'> {
  /**
   * Support data type object to determine severity for specific text
   */
  labels: string[] | ObjectBadge[];
  /**
   * Determine whether severity of text "more" is customizable
   *
   * @default undefined
   */
  textMoreSeverity?: HintedString<
    'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'contrast'
  >;
  /**
   * The text shown on the more button
   *
   * @default 'more'
   */
  textMore?: string;
  /**
   * Maximum number of label to be shown.
   */
  limit?: number;
  /**
   * The dialog header shown on more button clicked
   */
  headerLabel?: string;
}

export interface BadgeGroupSlots {
  /**
   * Slot for custom more dialog content
   */
  dialogcontent: Slot<{ labels: string[] }>;
}

export default class Badge extends ClassComponent<
  BadgeGroupProps,
  BadgeGroupSlots,
  unknown
> {}