/**
 * `<chart-ui>` — Declarative SVG chart supporting 18 types: bar, line, pie, donut, radar, sparkline, segments, area, scatter, radial-bar, gauge, stacked-bar, grouped-bar, multi-line, funnel, treemap, sankey, and composed.
 *
 * @see https://ui-kit.exe.xyz/site/components/chart
 *
 * 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 type ChartHoverEvent = CustomEvent<unknown>;
export type ChartLeaveEvent = CustomEvent<unknown>;
export type ChartSelectEvent = CustomEvent<unknown>;
export type ChartLegendUpdateEvent = CustomEvent<unknown>;

export class UIChart extends UIElement {
  /** Chart type. All 18 enum values have dedicated render paths in chart.js. */
  type: 'bar' | 'line' | 'pie' | 'donut' | 'radar' | 'sparkline' | 'segments' | 'area' | 'scatter' | 'radial-bar' | 'gauge' | 'stacked-bar' | 'grouped-bar' | 'multi-line' | 'funnel' | 'treemap' | 'sankey' | 'composed';
  /** Color scheme */
  color: 'accent' | 'success' | 'warning' | 'danger' | 'info';
  /** JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x="month" y="revenue">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute. */
  data: string;
  /** Number-format mode applied to axis labels + value overlays + donut total + gauge value + treemap value + funnel value + internal tooltip. `abbr` is the legacy 1.2K / 3M format; `decimal` fixes 2 decimals; `currency` prefixes via `--chart-currency-prefix` token (default "$"); `percent` multiplies × 100 and adds a % suffix. */
  format: 'abbr' | 'decimal' | 'currency' | 'percent';
  /** When true, suppress the overlaid average line */
  hideAverage: boolean;
  /** Hide gridlines */
  hideGrid: boolean;
  /** Hide value labels */
  hideValues: boolean;
  /** Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27). */
  loading: boolean;
  /** Bar corner radius (null = let CSS tokens decide) */
  radius: number;
  /** Chart size */
  size: 'sm' | 'md' | 'lg';
  /** Line smoothing factor */
  smooth: number;
  /** Data key for x-axis (category) values */
  x: string;
  /** Y-axis key(s), comma-separated for multi-series */
  y: string;

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIChart, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'chart-hover', listener: (ev: ChartHoverEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'chart-leave', listener: (ev: ChartLeaveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'chart-select', listener: (ev: ChartSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'legend-update', listener: (ev: ChartLegendUpdateEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
