/**
 * `<swiper-ui>` — CSS-first carousel with scroll-snap. Supports autoplay, loop, and peek; JS-stamped pagination dots and paddles.
 *
 * @see https://ui-kit.exe.xyz/site/components/swiper
 *
 * 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 SwiperAutoplayPauseEventDetail {
  /** Pause reason ("hover" or "focus"). */
  reason: string;
}

export type SwiperAutoplayPauseEvent = CustomEvent<SwiperAutoplayPauseEventDetail>;
export type SwiperAutoplayResumeEvent = CustomEvent<unknown>;
export interface SwiperChangeEventDetail {
  /** New active slide index. */
  index: number;
  /** The active slide element. */
  slide: Record<string, unknown>;
}

export type SwiperChangeEvent = CustomEvent<SwiperChangeEventDetail>;

export class UISwiper extends UIElement {
  /** Enable auto-advance */
  autoplay: boolean;
  /** Pagination chrome layout. `default` (overlay paddles + centered dots below) or `toolbar` (header row with label + paddles, footer row with counter + dots). */
  chrome: 'default' | 'toolbar';
  /** When `chrome="toolbar"`, show a "current / total" page counter in the footer (left). */
  counter: boolean;
  /** Gap between slides (token: sm, md, lg) */
  gap: string;
  /** Autoplay interval in ms */
  interval: number;
  /** Title rendered in the toolbar header (left). Only used when `chrome="toolbar"`. */
  label: string;
  /** Infinite loop */
  loop: boolean;
  /** Suppress the default pause-on-hover/focus behavior for autoplay. */
  noPauseOnHover: boolean;
  /** Show peek of adjacent slides */
  peek: boolean;
  /** Number of slides visible at once. Accepts "1", "2", "3", or "auto". Empty = CSS default (single slide). */
  slidesPerView: string;
  /** Scroll-snap alignment — start, center, end, or none. */
  snap: 'start' | 'center' | 'end' | 'none';

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UISwiper, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'autoplay-pause', listener: (ev: SwiperAutoplayPauseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'autoplay-resume', listener: (ev: SwiperAutoplayResumeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'change', listener: (ev: SwiperChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
