/**
 * `<toggle-scheme-ui>` — Icon-button primitive that toggles `color-scheme` between light and dark on a target element (default `:root`). Encapsulates the prefers-color-scheme initial-resolution, the inline-style write to the target, optional localStorage persistence (sharing the `adia-theme-` namespace with <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired `<button-ui id="theme-toggle">` + `applyScheme()` pattern previously duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
 *
 * @see https://ui-kit.exe.xyz/site/components/toggle-scheme
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export interface ToggleSchemeSchemeChangeEventDetail {
  /** Active color scheme ("light" or "dark"). */
  scheme: string;
  /** Change source — "press" / "media" / "programmatic". */
  source: string;
}

export type ToggleSchemeSchemeChangeEvent = CustomEvent<ToggleSchemeSchemeChangeEventDetail>;

export class UIToggleScheme extends UIElement {
  /** Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle(). */
  activeScheme: '' | 'light' | 'dark';
  /** Semantic intent forwarded to the internal <button-ui>. */
  color: '' | 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
  /** Disables the internal button. */
  disabled: boolean;
  /** Phosphor icon shown when active-scheme is "dark" (clicking switches to light). */
  iconDark: string;
  /** Phosphor icon shown when active-scheme is "light" (clicking switches to dark). */
  iconLight: string;
  /** aria-label / title applied to the internal button when active-scheme is "dark". */
  labelDark: string;
  /** aria-label / title applied to the internal button when active-scheme is "light". */
  labelLight: string;
  /** Persist the user's choice to localStorage under `${storage-prefix}scheme`. */
  persist: boolean;
  /** Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force. */
  scheme: 'auto' | 'light' | 'dark';
  /** Sizing scale forwarded to the internal <button-ui>. */
  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  /** LocalStorage key prefix; default matches <theme-panel> for cross-element interop. */
  storagePrefix: string;
  /** CSS selector for the element receiving `color-scheme`. ":root" → <html>. */
  target: string;
  /** Visual style forwarded to the internal <button-ui>. Defaults to "ghost" (matches app practice). */
  variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'soft';

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