/**
 * `<search-ui>` — Search input with debounce + clear button + Enter-to-search.
 *
 * @see https://ui-kit.exe.xyz/site/components/search
 */

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

export interface SearchInputEventDetail {
  value: string;
}
export type SearchInputEvent = CustomEvent<SearchInputEventDetail>;
export type SearchChangeEvent = CustomEvent<SearchInputEventDetail>;

export interface SearchEventDetail {
  value: string;
}
/** Fired after debounce OR on Enter — your "do the search" trigger. */
export type SearchEvent = CustomEvent<SearchEventDetail>;

export class UISearch extends UIFormElement {
  placeholder: string;
  /** Debounce delay in ms before `search` event fires. */
  debounce: number;

  /** Programmatically focus the inner input. */
  focus(): void;

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