import type {
  ActorDetails,
  CanvasBackground,
  ThemeName,
  ThemePalette,
} from "./index.js";

export type {
  ActorDetails,
  CanvasBackground,
  ThemeName,
  ThemePalette,
} from "./index.js";

export interface ChangeDetail {
  readonly source: string;
}

export interface ErrorDetail {
  readonly error: Error;
}

export interface LinesAndArrowsEventMap extends HTMLElementEventMap {
  "la-actor-select": CustomEvent<ActorDetails | null>;
  "la-change": CustomEvent<ChangeDetail>;
  "la-error": CustomEvent<ErrorDetail>;
}

export interface LinesAndArrowsElement extends HTMLElement {
  source: string;
  mode: "view" | "edit";
  theme: ThemeName;
  label: string;
  selectableActors: boolean;
  branding: boolean;
  copySource: boolean;
  /** Shows the view-mode Download SVG action. Defaults to true. */
  downloadSvg: boolean;
  canvasBackground: CanvasBackground;
  palette: ThemePalette | null;
  selectActor(name: string | null): void;
  addEventListener<Type extends keyof LinesAndArrowsEventMap>(
    type: Type,
    listener:
      | ((
          this: LinesAndArrowsElement,
          event: LinesAndArrowsEventMap[Type],
        ) => unknown)
      | null,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject | null,
    options?: boolean | AddEventListenerOptions,
  ): void;
  removeEventListener<Type extends keyof LinesAndArrowsEventMap>(
    type: Type,
    listener:
      | ((
          this: LinesAndArrowsElement,
          event: LinesAndArrowsEventMap[Type],
        ) => unknown)
      | null,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject | null,
    options?: boolean | EventListenerOptions,
  ): void;
}

export function defineLinesAndArrows(): void;

declare global {
  interface HTMLElementTagNameMap {
    "lines-and-arrows": LinesAndArrowsElement;
  }
}