/**
 * `<accordion-ui>` — Accordion container managing single or multiple open states across
a collection of <accordion-item-ui> children. Each item carries its
own [open] reflected state; the accordion host coordinates exclusive
opening when [multiple] is unset (default single-open mode). Use
inside settings pages, FAQ blocks, or any progressive-disclosure
pattern where one-level collapsible groups suffice — for arbitrary
hierarchy use <tree-ui>; for in-page view switching use <tabs-ui>.

 *
 * @see https://ui-kit.exe.xyz/site/components/accordion
 *
 * 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 AccordionToggleEventDetail {
  /** New open state of the panel. */
  open: boolean;
}

export type AccordionToggleEvent = CustomEvent<AccordionToggleEventDetail>;

export class UIAccordion extends UIElement {
  /** Allow multiple panels to be open simultaneously */
  multiple: boolean;
  /** Visual posture, inherited by child accordion-item-ui elements unless a
child sets its own [variant]. `flat` (default) renders items with no
chrome — settings pages, FAQ blocks, anywhere the accordion sits
directly on the page canvas. `contained` gives every item a bounded
surface (background + border + radius spanning header and open body,
plus a divider between them when open) — the composition to reach for
when nesting the accordion inside <card-ui>. */
  variant: 'flat' | 'contained';

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

export interface AccordionItemToggleEventDetail {
  /** New open state. */
  open: boolean;
}

export type AccordionItemToggleEvent = CustomEvent<AccordionItemToggleEventDetail>;

export class UIAccordionItem extends UIElement {
  /** Whether the section is expanded. */
  open: boolean;
  /** Header text — the clickable label that toggles the section. */
  text: string;
  /** Per-item posture override. Items normally inherit their host
accordion-ui's [variant] — set this directly on ONE item only to
opt it out of (`flat`) or into (`contained`) the host's posture. */
  variant: 'flat' | 'contained';

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