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

export interface BadgeComponentConfigs {
  /**
   * The component project specific configuration to set the severity based on given label. If provided, `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;
  /**
   * Prevent the badge text from being empty.
   * When set to true, the badge text content will be set to the previous value if it left empty.
   */
  restoreOnEmpty?: 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.
   *
   * @default - Truncates text longer than 12 characters to "first5..last5" format
   * @example
   * // Default format (undefined)
   * <Badge label="This is a very long text" /> // Displays: "This ..text"
   *
   * // nowrap format - never truncates, shows full text
   * <Badge label="This is a very long text" format="nowrap" /> // Displays: "This is a very long text"
   *
   * // username format - formats using formatUserName utility
   * <Badge label="Tiffany Glover" format="username" /> // Displays: "Tiffany G"
   * <Badge label="Christopher Columbus" format="username" /> // Displays: "Christop.. C"
   */
  format?: 'username' | 'nowrap';
  /**
   * Whether to show the remove icon or not. Clicking the remove icon will emit 'remove' event.
   */
  removable?: boolean;
  /**
   * It will show remove button with disable state when `removable` is false.
   * The badge container remains enabled, only remove button is disabled.
   *
   * It will affect nothing when `removable` is true. It still shows remove button and not disabled.
   */
  disableRemoveButton?: boolean;
  /**
   * Sets the entire badge including remove button 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 interface BadgeEmits {
  'remove': [];
  /**
   * Emits when the text is edited.
   * Only available when props.editable=true
   */
  'update:label': [label: string | null, prevLabel: 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
> {}