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

export interface BadgeComponentConfigs {
  /**
   * The component configurasion to set the severity based on given label. If provided, props.severity might be omitted.
   *
   * @param label The badge label
   * @returns The matched severity of given label
   */
  getSeverity?: (label?: string) => BadgeProps['severity'];
}

/**
 * Props for Badge component
 */
export interface BadgeProps extends BadgeComponentConfigs {
  /**
   * The text to be displayed.
   */
  label: string;
  /**
   * Whether the badge text is editable.
   */
  editable?: boolean;
  /**
   * Sets the severity level for styling purposes. This prop might be omitted if getSeverity is provided.
   */
  severity?: 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'primary';
  /**
   * Specifies the format for text truncation rules based on the usage context.
   */
  format?: 'username' | 'nowrap';
  /**
   * Whether to show the remove icon or not. Clicking the remove icon will emit 'remove' event.
   */
  removable?: boolean;
  /**
   * Whether to set badge become disabled.
   */
  disabled?: boolean;

  /**
   * Set custom tooltip for badge.
   *
   * @default - the full label if the badge text is truncated
   */
  tooltip?: string;
}

/**
 * Emits for Badge component
 */
export type BadgeEmits = {
  'remove': [];
  /**
   * Emits when the text is edited.
   * Only available when props.editable=true
   */
  'update:label': [label: string | null];
};

/**
 * **WangsVue - Badge**
 *
 * _Badge is a component for displaying a text with optional remove functionality._
 *
 * @group components
 */
export default class Badge extends ClassComponent<
  BadgeProps,
  unknown,
  BadgeEmits
> {}