import { App, Ref, Component } from 'vue';

interface AppBaseContext {
    readonly appName: string;
    readonly blockName: string;
    readonly version: string;
    readonly scriptUrl: string;
    readonly imageBuckets: Record<string, string>;
    readonly globalDesign: Record<string, Record<string, unknown>>;
}
interface AppBaseData<C, D> {
    readonly content: C;
    readonly design: D;
    readonly defaults: Record<string, unknown>;
}
interface AppBaseState<C, D> {
    readonly context: AppBaseContext;
    readonly data: AppBaseData<C, D>;
}

interface VueBaseProps<CONTENT, DESIGN> {
    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>) => void;
    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>) => void;
    readonly context: Ref<AppBaseContext>;
    readonly content: Ref<CONTENT>;
    readonly design: Ref<DESIGN>;
    readonly defaults: Ref<Record<string, unknown>>;
}
declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;

declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
    hasContent: boolean;
    value: string | undefined;
};

declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
    hasContent: boolean;
    value: string | undefined;
};

declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
    title: string | undefined;
    link: string | undefined;
    hasTitle: boolean;
    hasLink: boolean;
    performAction: () => void;
};

declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
    hasContent: boolean;
    lowResolutionMobileImage: string;
    highResolutionMobileImage: string;
    lowResolutionDesktopImage: string;
    highResolutionDesktopImage: string;
};

declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
    hasContent: boolean;
    value: boolean | undefined;
};

declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
    hasContent: boolean;
    value: undefined;
};

declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
    font: string | undefined;
    size: number | GlobalTextSizeString | undefined;
    bold: boolean | undefined;
    italic: boolean | undefined;
    color: Color | GlobalColorsString | undefined;
    visible: boolean | undefined;
};

declare function useTextareaElementDesign<DESIGN>(elementName: keyof DESIGN): {
    font: string | undefined;
    size: number | GlobalTextSizeString | undefined;
    bold: boolean | undefined;
    italic: boolean | undefined;
    color: Color | GlobalColorsString | undefined;
    visible: boolean;
    whiteSpace: string;
};

declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): {
    appearance: ButtonAppearance | undefined;
    font: string | undefined;
    size: ButtonSize | undefined;
    style: ButtonStyle | undefined;
    color: Color | GlobalColorsString | undefined;
    visible: boolean | undefined;
};

declare function useImageElementDesign<DESIGN>(elementName: keyof DESIGN): {
    overlay: Overlay | undefined;
    visible: boolean | undefined;
};

declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): {
    enabled: boolean | undefined;
};

declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): {
    value: string | undefined;
};

declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): {
    background: Background | undefined;
};

declare function useLayoutElementDesign(): {
    layout: string | undefined;
};

interface VueServerAppExtensions {
    init?: (app: App<Element>) => void;
    render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
}
interface VueRenderResult {
    readonly html: string;
    readonly state: unknown;
}
declare function createVueServerApp<C, D>(appComponent: Component, extensions?: VueServerAppExtensions): {
    init: () => {
        render: (context: AppBaseContext, data: AppBaseData<C, D>) => Promise<VueRenderResult>;
    };
};

interface VueClientAppExtensions {
    init?: (app: App<Element>) => void;
    mount?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, rootContainer: string, state: S) => void;
    update?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, state: S) => void;
    unmount?: (app: App<Element>) => void;
}
declare function createVueClientApp<C, D>(appComponent: Component, extensions?: VueClientAppExtensions): {
    init: () => {
        mount: <S extends AppBaseState<C, D>>(rootContainer: string, state: S) => void;
        update: <S_1 extends AppBaseState<C, D>>(state: S_1) => void;
        unmount: () => void;
    };
};

export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
