// Types for <fk-shader>. Drop this file next to fk-shader.js, or reference it from a .d.ts in your project.
export type FkShaderVariant = 'dots' | 'squares' | 'lines' | 'dither' | 'ascii' | 'lcd';
export type FkShaderErrorReason = 'load' | 'cors';

export interface FkShaderElement extends HTMLElement {
  src: string | null;
  variant: FkShaderVariant | null;
  // numbers go in as numbers or strings; they read back as the attribute string
  get pitch(): string | null; set pitch(v: number | string | null);
  get size(): string | null; set size(v: number | string | null);
  get contrast(): string | null; set contrast(v: number | string | null);
  get exposure(): string | null; set exposure(v: number | string | null);
  fit: 'cover' | 'contain' | null;
  lcd: 'digits' | 'pixels' | null;
  alt: string | null;
  invert: boolean;
  interactive: boolean;
  paused: boolean;
  /** true once the first frame of the current source has been drawn */
  readonly ready: boolean;
  /** why the current source failed, or null */
  readonly error: FkShaderErrorReason | null;
  play(): void;
  pause(): void;
  addEventListener(type: 'ready', listener: (e: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'error', listener: (e: CustomEvent<{ reason: FkShaderErrorReason }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
}

/** The attributes as JSX props. Booleans take true or false; numbers take numbers or strings. */
export interface FkShaderAttributes {
  src?: string;
  variant?: FkShaderVariant;
  pitch?: number | string;
  size?: number | string;
  contrast?: number | string;
  exposure?: number | string;
  fit?: 'cover' | 'contain';
  lcd?: 'digits' | 'pixels';
  alt?: string;
  invert?: boolean;
  interactive?: boolean;
  paused?: boolean;
  class?: string;
  /** React 19 only: React 18 writes it as a literal classname attribute, so use class there */
  className?: string;
  id?: string;
  style?: any;
  ref?: any;
  key?: string | number;
}

declare global {
  interface HTMLElementTagNameMap { 'fk-shader': FkShaderElement; }
  interface Window { FkShader: { new (): FkShaderElement; prototype: FkShaderElement }; }
  // React 18 and earlier read the global JSX namespace
  namespace JSX { interface IntrinsicElements { 'fk-shader': FkShaderAttributes; } }
}

// React 19 reads JSX from the react module
declare module 'react' {
  namespace JSX { interface IntrinsicElements { 'fk-shader': FkShaderAttributes; } }
}