/**
 * `<slider-ui>` — Single- or two-thumb slider for numeric input.
 *
 * Default: single-thumb (`value`).
 * Dual mode: set `[dual]` and use `[lower-value]` / `[upper-value]`; the fill
 * spans between the thumbs and the `change` event detail becomes
 * `{lower, upper}`.
 *
 * @see https://ui-kit.exe.xyz/site/components/slider
 */

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

export interface SliderChangeEventDetailSingle {
  value: number;
}
export interface SliderChangeEventDetailDual {
  lower: number;
  upper: number;
}
export type SliderChangeEventDetail = SliderChangeEventDetailSingle | SliderChangeEventDetailDual;
export type SliderChangeEvent = CustomEvent<SliderChangeEventDetail>;
export type SliderInputEvent = CustomEvent<SliderChangeEventDetail>;

export class UISlider extends UIFormElement {
  /** Numeric value — overrides UIFormElement.value (which is String). Single-thumb mode; ignored when [dual]. */
  value: number;
  /** Two-thumb range slider mode. */
  dual: boolean;
  /** Lower thumb value (dual mode). */
  lowerValue: number;
  /** Upper thumb value (dual mode). */
  upperValue: number;
  min: number;
  max: number;
  step: number;
  label: string;
  suffix: string;
  /** §184 (v0.5.5, FEEDBACK-08 §4): debounce `input` event by this many ms. 0 = no throttle. */
  throttle: number;
  /** §184 (v0.5.5, FEEDBACK-08 §4): hint text rendered below the track, wired to aria-describedby. */
  hint: string;

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