/**
 * `<rating-ui>` — Star rating input (or other icon set).
 *
 * @see https://ui-kit.exe.xyz/site/components/rating
 */

import { UIFormElement } from '../../core/form.js';

export interface RatingChangeEventDetail {
  value: number;
}
export type RatingChangeEvent = CustomEvent<RatingChangeEventDetail>;

export class UIRating extends UIFormElement {
  /** Numeric rating value — overrides UIFormElement.value (which is String). */
  value: number;
  /** Maximum rating — number of icons rendered. */
  max: number;
  /** Phosphor icon name (default: `star`). */
  icon: string;
  /** Read-only mode (display only; no interaction). */
  readonly: boolean;
  /** Allow half-step values (0.5, 1.5, …). */
  allowHalf: boolean;
  size: 'sm' | 'md' | 'lg';
  /**
   * §247 (v0.5.10, FB-26 §1): visual treatment family. `star` (default) /
   * `heart` / `thumbs` swap the rendered icon set + selected-state color.
   * Yaml-declared `enum` was not previously typed in `.d.ts`; consumers
   * authoring `el.variant = 'heart'` got TS2339 despite the runtime
   * accepting the value.
   */
  variant: 'star' | 'heart' | 'thumbs';

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIRating, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'change', listener: (ev: RatingChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
