// ---- Event system ----

export type Cancelable = {
  cancel: () => void;
};

export type EventEmitterType = {
  on: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
  once: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
  trigger: (eventName: string, ...args: any[]) => void;
  off: (eventName: string, handler: (...args: any[]) => void) => void;
  destroy: () => void;
};

// ---- Dimensions ----

export type CssDimensionsType = {
  width: string;
  height: string;
};

// ---- Computed props ----

export type ComputedPropConfig<P> = {
  /**
   * Produce a computed prop value. Runs AFTER containerTemplate,
   * so `state` reflects any mutations made by the container template.
   * Return value is classified by `type`: 'function' → dispatch map, 'value' → data payload.
   */
  factory: (context: {props: P; state: Record<string, any>}) => any;
  type: 'function' | 'value';
};

// ---- Penpal dispatch pattern ----

export type ParentMethods = {
  callParent: (name: string, args: any[]) => any;
};

export type ChildMethods = {
  callChild: (name: string, args: any[]) => any;
  updateProps: (dataProps: Record<string, any>, functionNames?: string[]) => void;
};

// ---- Container/prerender template options ----

export type RenderOptions<P> = {
  uid: string;
  frame: HTMLIFrameElement;
  placeholder: HTMLElement | undefined;
  doc: Document;
  props: P;
  event: EventEmitterType;
  dimensions: CssDimensionsType;
  state: Record<string, any>;
  container?: HTMLElement;
};

// ---- Component options (replaces ComponentOptionsType) ----

export type BridgeComponentOptions<P> = {
  tag: string;
  url: string;
  dimensions?: CssDimensionsType;
  autoResize?: {width?: boolean; height?: boolean; element?: string};

  /**
   * Build wrapper DOM around the iframe. Runs BEFORE computed prop factories,
   * so it may mutate `state` (e.g., `state.__container = container`) for factories to read.
   */
  containerTemplate?: (options: RenderOptions<P>) => HTMLElement | undefined;
  prerenderTemplate?: (options: RenderOptions<P>) => HTMLElement | undefined;

  validate?: (input: {props: P}) => void;
  defaultProps?: (context: {event: EventEmitterType}) => Partial<P>;

  /** Parent-side computed props — factories run at render time */
  computedProps?: Record<string, ComputedPropConfig<P>>;

  /** Alternative input names for props (e.g., merchants can pass innerStyle or style) */
  aliases?: Record<string, string>;

  /** Optional submit factory — wires instance.submit() on the component (e.g., CardInput) */
  submit?: (instance: BridgeComponent<P>) => (options?: any) => Promise<any>;
};

// ---- Component instance (replaces MoneiComponent) ----

export interface BridgeComponent<P> {
  render: (container?: string | HTMLElement) => Promise<void>;
  updateProps: (props: Partial<P>) => Promise<void>;
  close: () => Promise<void>;
  destroy: () => Promise<void>;
  submit?: (options?: any) => Promise<any>;
  state: Record<string, any>;
  event: EventEmitterType;
  props: P;
  driver: (name: string, deps?: Record<string, any>) => any;
}

// ---- Constructor returned by createComponent() ----

export interface BridgeComponentConstructor<P> {
  new (props: P): BridgeComponent<P>;
  driver: (name: string, deps?: Record<string, any>) => any;
}