import { Slot } from 'vue';

import { BadgeProps } from '../badge';

import { ClassComponent, HintedString } from '../ts-helpers.d';

export type ObjectBadge = {
  text: string;
  severity: BadgeProps['severity'];
  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[] }>;
}

/**
 * **WangsVue - BadgeGroup**
 *
 * _A component that displays a collection of badges with optional overflow handling.
 * When the number of badges exceeds the specified limit, remaining badges are shown in a dialog._
 *
 * @group components
 */
export default class BadgeGroup extends ClassComponent<
  BadgeGroupProps,
  BadgeGroupSlots,
  unknown
> {}