/**
 * `<otp-input-ui>` — Auto-focus-advancing one-time-passcode input (6 digits by default).
 *
 * @see https://ui-kit.exe.xyz/site/components/otp-input
 */

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

export interface OtpInputEventDetail {
  /** Combined digits as a string (e.g. `"123456"`). */
  value: string;
}
export type OtpInputEvent = CustomEvent<OtpInputEventDetail>;
export type OtpInputInputEvent = CustomEvent<OtpInputEventDetail>;
export type OtpInputChangeEvent = CustomEvent<OtpInputEventDetail>;

/**
 * Detail payload for the `complete` event — fired exactly once when the
 * user fills the last digit slot. `value` is the full combined string at
 * the moment of completion.
 */
export interface OtpInputCompleteEventDetail {
  value: string;
}
export type OtpInputCompleteEvent = CustomEvent<OtpInputCompleteEventDetail>;

export class UIOtpInput extends UIFormElement {
  /** Number of digit slots. */
  length: number;

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