import { EChartsOption } from 'echarts';
import { MermaidConfig } from 'mermaid';
import { SandpackPredefinedTemplate, SandpackOptions, SandpackSetup } from 'sandpack-vue3';
import { ReplProps } from '@vue/repl';

interface EChartsConfig {
    /**
     * ECharts global options
     *
     * ECharts 全局选项
     */
    option?: EChartsOption;
    /**
     * ECharts setup function
     *
     * ECharts 初始化函数
     */
    setup?: () => Promise<void>;
}
declare const defineEChartsConfig: (config: EChartsConfig) => void;
/** @deprecated: use defineEChartsConfig instead */
declare const defineEchartsConfig: (config: EChartsConfig) => void;
declare const useEChartsConfig: () => EChartsConfig;

type KotlinPlaygroundInstance = any;
interface KotlinPlaygroundOptions {
    server?: string;
    version?: string;
    onChange?: (code: string) => void;
    onRun?: () => void;
    onError?: () => void;
    getJsCode?: (code: string) => void;
    onTestPassed?: () => void;
    onTestFailed?: () => void;
    onOpenConsole?: () => void;
    onCloseConsole?: () => void;
    callback?: (targetNode: HTMLElement, mountNode: HTMLElement) => void;
    getInstance?: (instance: KotlinPlaygroundInstance) => void;
}

interface MermaidThemeVariables {
    dark?: boolean;
    background?: string;
    textColor?: string;
    lineColor?: string;
    mainBkg?: string;
    errorBkgColor?: string;
    errorTextColor?: string;
    fontFamily?: string;
    titleColor?: string;
    border1?: string;
    border2?: string;
    nodeBorder?: string;
    nodeTextColor?: string;
    primaryColor?: string;
    primaryBorderColor?: string;
    primaryTextColor?: string;
    secondaryColor?: string;
    secondaryBorderColor?: string;
    secondaryTextColor?: string;
    tertiaryColor?: string;
    tertiaryBorderColor?: string;
    tertiaryTextColor?: string;
    personBorder?: string;
    personBkg?: string;
    classText?: string;
    attributeBackgroundColorOdd?: string;
    attributeBackgroundColorEven?: string;
    arrowheadColor?: string;
    clusterBkg?: string;
    clusterBorder?: string;
    edgeLabelBackground?: string;
    excludeBkgColor?: string;
    sectionBkgColor?: string;
    sectionBkgColor2?: string;
    altSectionBkgColor?: string;
    gridColor?: string;
    todayLineColor?: string;
    taskBkgColor?: string;
    taskBorderColor?: string;
    taskTextColor?: string;
    taskTextDarkColor?: string;
    taskTextClickableColor?: string;
    taskTextOutsideColor?: string;
    activeTaskBorderColor?: string;
    activeTaskBkgColor?: string;
    doneTaskBorderColor?: string;
    doneTaskBkgColor?: string;
    critBorderColor?: string;
    critBkgColor?: string;
    git1?: string;
    git2?: string;
    git3?: string;
    git4?: string;
    git5?: string;
    git6?: string;
    git7?: string;
    gitBranchLabel1?: string;
    gitBranchLabel2?: string;
    gitBranchLabel3?: string;
    gitBranchLabel4?: string;
    gitBranchLabel5?: string;
    gitBranchLabel6?: string;
    gitBranchLabel7?: string;
    gitInv1?: string;
    gitInv2?: string;
    gitInv3?: string;
    gitInv4?: string;
    gitInv5?: string;
    gitInv6?: string;
    gitInv7?: string;
    commitLabelBackground?: string;
    commitLabelColor?: string;
    commitLabelFontSize?: string;
    tagLabelBorder?: string;
    tagLabelBackground?: string;
    tagLabelColor?: string;
    tagLabelFontSize?: string;
    fillType0?: string;
    fillType1?: string;
    fillType2?: string;
    fillType3?: string;
    fillType4?: string;
    fillType5?: string;
    fillType6?: string;
    fillType7?: string;
    pie1?: string;
    pie2?: string;
    pie3?: string;
    pie4?: string;
    pie5?: string;
    pie6?: string;
    pie7?: string;
    pie8?: string;
    pie9?: string;
    pie10?: string;
    pie11?: string;
    pie12?: string;
    pieStrokeWidth?: string;
    pieOpacity?: string;
    pieOuterStrokeColor?: string;
    pieOuterStrokeWidth?: string;
    pieTitleTextSize?: string;
    pieTitleTextColor?: string;
    requirementBackground?: string;
    requirementBorderColor?: string;
    requirementBorderSize?: string;
    requirementTextColor?: string;
    relationColor?: string;
    relationLabelBackground?: string;
    relationLabelColor?: string;
    labelColor?: string;
    signalColor?: string;
    signalTextColor?: string;
    labelBoxBorderColor?: string;
    labelBoxBkgColor?: string;
    labelTextColor?: string;
    loopTextColor?: string;
    noteBkgColor?: string;
    noteTextColor?: string;
    noteBorderColor?: string;
    activationBorderColor?: string;
    activationBkgColor?: string;
    sequenceNumberColor?: string;
    actorBorder?: string;
    actorBkg?: string;
    actorTextColor?: string;
    actorLineColor?: string;
    [props: string]: string | boolean | undefined;
}
type MermaidOptions = Omit<MermaidConfig, "startOnLoad" | "themeVariables"> & {
    themeVariables?: MermaidThemeVariables | ((isDarkMode: boolean) => MermaidThemeVariables);
};

/**
 * Sandpack config
 *
 * @description Sandpack is using [`sandpack-vue3`](https://github.com/jerrywu001/sandpack-vue3)
 *
 * Sandpack 交互演示配置
 *
 * @description Sandpack 使用 [`sandpack-vue3`](https://github.com/jerrywu001/sandpack-vue3)
 */
interface SandpackConfig {
    /**
     * Specify the template
     *
     * 指定模板
     */
    template?: SandpackPredefinedTemplate;
    /**
     * Options to configure the sandpack
     *
     * sandpack 配置项
     */
    options?: SandpackOptions;
    /**
     * Options to configure the customSetup
     *
     * sandpack customSetup 配置项
     */
    customSetup?: SandpackSetup;
}

/**
 * Vue Playground options
 *
 * @description Vue playground is using [`@vue/repl`](https://github.com/vuejs/repl)
 *
 * Vue 交互演示配置
 *
 * @description Vue playground 使用 [`@vue/repl`](https://github.com/vuejs/repl)
 */
interface VuePlaygroundOptions extends Omit<ReplProps, "store" | "editor"> {
    /**
     * Specify the version of vue
     *
     * 指定 vue 版本
     */
    vueVersion?: string;
    /**
     * Specify default URL to import Vue dev runtime from in the sandbox
     *
     * 指定默认的 Vue 开发运行时
     *
     * @default "https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js"
     */
    vueRuntimeDevUrl?: string | (() => string);
    /**
     * Specify default URL to import Vue prod runtime from in the sandbox
     *
     * 指定默认的 Vue 生产运行时
     *
     * @default "https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.prod.js"
     */
    vueRuntimeProdUrl?: string | (() => string);
    /**
     * Specify default URL to import Vue Server Renderer from in the sandbox
     *
     * 指定默认的 Vue 服务端渲染器
     *
     * @default "https://unpkg.com/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js"
     */
    vueServerRendererUrl?: string | (() => string);
}

declare const defineKotlinPlaygroundConfig: (options: KotlinPlaygroundOptions) => void;
declare const useKotlinPlaygroundConfig: () => KotlinPlaygroundOptions;

declare const defineMermaidConfig: (options: MermaidOptions) => void;
declare const useMermaidOptions: () => MermaidOptions;

declare const defineSandpackConfig: (config: SandpackConfig) => void;
declare const useSandpackConfig: () => SandpackConfig;

declare const defineVuePlaygroundConfig: (options: VuePlaygroundOptions) => void;
declare const useVuePlaygroundConfig: () => VuePlaygroundOptions;

/**
 * Forked from https://github.com/ulivz/vuepress-plugin-flowchart/tree/master/lib/presets
 *
 * MIT LICENSED
 */
declare const flowchartPresets: {
    ant: {
        symbols: {
            start: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            end: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            operation: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            inputoutput: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            subroutine: {
                class: string;
                "font-color": string;
                fill: string;
                "element-color": string;
                "line-color": string;
            };
            condition: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            parallel: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
        };
        x: number;
        y: number;
        "line-width": number;
        "line-length": number;
        "text-margin": number;
        "font-size": number;
        "font-color": string;
        "line-color": string;
        "element-color": string;
        fill: string;
        "yes-text": string;
        "no-text": string;
        "arrow-end": string;
        scale: number;
    };
    vue: {
        symbols: {
            start: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            end: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            operation: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            inputoutput: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            subroutine: {
                class: string;
                "font-color": string;
                fill: string;
                "element-color": string;
                "line-color": string;
            };
            condition: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
            parallel: {
                class: string;
                "font-color": string;
                fill: string;
                "line-width": string;
            };
        };
        x: number;
        y: number;
        "line-width": number;
        "line-length": number;
        "text-margin": number;
        "font-size": number;
        "font-color": string;
        "line-color": string;
        "element-color": string;
        fill: string;
        "yes-text": string;
        "no-text": string;
        "arrow-end": string;
        scale: number;
    };
    pie: {
        "line-width": number;
        symbols: {
            start: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
            end: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
            operation: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
            inputoutput: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
            subroutine: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
            condition: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
            parallel: {
                class: string;
                fill: string;
                "line-color": string;
                "font-color": string;
            };
        };
        x: number;
        y: number;
        "line-length": number;
        "text-margin": number;
        "font-size": number;
        "font-color": string;
        "line-color": string;
        "element-color": string;
        fill: string;
        "yes-text": string;
        "no-text": string;
        "arrow-end": string;
        scale: number;
    };
};

export { defineEChartsConfig, defineEchartsConfig, defineKotlinPlaygroundConfig, defineMermaidConfig, defineSandpackConfig, defineVuePlaygroundConfig, flowchartPresets, useEChartsConfig, useKotlinPlaygroundConfig, useMermaidOptions, useSandpackConfig, useVuePlaygroundConfig };
export type { EChartsConfig };