import { FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
import { SvelteComponentTyped } from 'svelte';

interface SvelteAction<T = void> {
    (node: HTMLElement, parameters: T): void | {
        update?: (parameters: T) => void;
        destroy?: () => void;
    };
}
type Theme = "light" | "dark";
type Language = "en" | "zh-CN";
type IconType = "normal" | "disable";
type GenericIcon<K extends string, E extends string = IconType> = {
    [key in K]: {
        [kind in E]: string;
    };
};
type I18nData<T extends string> = Record<Language, Record<T, string>>;
interface ToolbarConfig {
    apps?: {
        enable?: boolean;
    };
}
interface FastboardUIConfig {
    toolbar?: {
        enable?: boolean;
    } & ToolbarConfig;
    redo_undo?: {
        enable?: boolean;
    };
    zoom_control?: {
        enable?: boolean;
    };
    page_control?: {
        enable?: boolean;
    };
}

declare interface RedoUndoProps {
  app?: FastboardApp | null;
  theme?: Theme;
  language?: Language;
  icons?: GenericIcon<"undo" | "redo">;
}

declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}

declare interface PageControlProps {
  app?: FastboardApp | null;
  theme?: Theme;
  language?: Language;
  icons?: GenericIcon<"prev" | "next" | "add">;
}

declare class PageControl extends SvelteComponentTyped<PageControlProps> {}

declare interface ZoomControlProps {
  app?: FastboardApp | null;
  theme?: Theme;
  language?: Language;
  icons?: GenericIcon<"plus" | "minus" | "reset">;
}

declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}

declare interface ToolbarProps {
  app?: FastboardApp | null;
  theme?: Theme;
  language?: Language;
  config?: ToolbarConfig;
}

declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}

declare interface PlayerControlProps {
  player?: FastboardPlayer | null;
  theme?: Theme;
  language?: Language;
  icons?: GenericIcon<"play" | "pause" | "loading">;
}

declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}

declare interface ReplayFastboardProps {
    player?: FastboardPlayer | null;
    theme?: Theme;
    language?: Language;
    containerRef?: (container: HTMLDivElement | null) => void;
}
declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {
}

declare interface FastboardProps {
    app?: FastboardApp | null;
    theme?: Theme;
    language?: Language;
    containerRef?: (container: HTMLDivElement | null) => void;
    config?: FastboardUIConfig;
}
declare class Fastboard extends SvelteComponentTyped<FastboardProps> {
}

interface UI {
    /** render UI to div */
    mount(div: Element, props?: FastboardProps): UI;
    /** update UI (theme, language, etc.) */
    update(props?: FastboardProps): void;
    /** remove UI */
    destroy(): void;
}
/**
 * @example
 * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
 * ui.update({ theme: "dark" })
 */
declare function createUI(app?: FastboardApp | null, div?: Element): UI;
interface ReplayUI {
    /** render UI to div */
    mount(div: Element, props?: ReplayFastboardProps): ReplayUI;
    /** update UI (theme, language, etc.) */
    update(props?: ReplayFastboardProps): void;
    /** remove UI */
    destroy(): void;
}
/**
 * @example
 * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
 * ui.update({ theme: "dark" })
 */
declare function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI;

interface AppInToolbar {
    kind: string;
    icon: string;
    label: string;
    onClick: (app: FastboardApp) => void;
}
declare class AppsInToolbar {
    private _data;
    _listeners: Array<(data: AppInToolbar[]) => void>;
    constructor(_data: AppInToolbar[]);
    get data(): AppInToolbar[];
    get length(): number;
    subscribe(fn: (data: AppInToolbar[]) => void): () => void;
    push(...data: AppInToolbar[]): void;
    insert(data: AppInToolbar, index: number): void;
    delete(filter: (data: AppInToolbar) => boolean): void;
    clear(): void;
}

declare const apps: AppsInToolbar;

export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };