import type { Configuration } from '@cesdk/cesdk-js';
import type CreativeEditorSDK from '@cesdk/cesdk-js';
import { DefineComponent } from 'vue';
import { PropType } from 'vue';

/**
 * A production-ready Vue 3 wrapper for the Creative Editor SDK.
 *
 * Provides a Vue component with proper error handling, loading state events,
 * and lifecycle management for integrating the Creative Editor SDK. The component
 * handles SDK initialization and cleanup using Vue's Composition API.
 *
 * @example Basic Usage
 * ```vue
 * <template>
 *   <CreativeEditor
 *     :config="{
 *       licenseKey: 'your-license-key',
 *       baseURL: 'https://your-cdn-url/assets',
 *     }"
 *     :init="initEditor"
 *     width="100vw"
 *     height="100vh"
 *   />
 * </template>
 *
 * <script setup lang="ts">
 * import CreativeEditor from '@cesdk/cesdk-js/vue';
 * import {
 *   BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
 *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
 *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
 *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
 *   VectorShapeAssetSource
 * } from '@cesdk/cesdk-js/plugins';
 *
 * const initEditor = async (cesdk) => {
 *   await cesdk.addPlugin(new ColorPaletteAssetSource());
 *   await cesdk.addPlugin(new TypefaceAssetSource());
 *   await cesdk.addPlugin(new TextAssetSource());
 *   await cesdk.addPlugin(new TextComponentAssetSource());
 *   await cesdk.addPlugin(new VectorShapeAssetSource());
 *   await cesdk.addPlugin(new StickerAssetSource());
 *   await cesdk.addPlugin(new EffectsAssetSource());
 *   await cesdk.addPlugin(new FiltersAssetSource());
 *   await cesdk.addPlugin(new BlurAssetSource());
 *   await cesdk.addPlugin(new PagePresetsAssetSource());
 *   await cesdk.addPlugin(new CropPresetsAssetSource());
 *   await cesdk.addPlugin(new UploadAssetSources());
 *   await cesdk.addPlugin(new DemoAssetSources());
 *   await cesdk.actions.run('scene.create');
 * };
 * </script>
 * ```
 *
 * @example With Error Handling
 * ```vue
 * <template>
 *   <CreativeEditor
 *     :config="{
 *       licenseKey: 'your-license-key',
 *       baseURL: 'https://your-cdn-url/assets',
 *     }"
 *     :init="initEditor"
 *     @loading-state-change="onLoadingStateChange"
 *     @error="onError"
 *     width="100vw"
 *     height="100vh"
 *   />
 * </template>
 *
 * <script setup lang="ts">
 * import CreativeEditor, {
 *   type CreativeEditorError,
 *   type CreativeEditorLoadingState
 * } from '@cesdk/cesdk-js/vue';
 * import {
 *   BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
 *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
 *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
 *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
 *   VectorShapeAssetSource
 * } from '@cesdk/cesdk-js/plugins';
 *
 * const initEditor = async (cesdk) => {
 *   await cesdk.addPlugin(new ColorPaletteAssetSource());
 *   await cesdk.addPlugin(new TypefaceAssetSource());
 *   await cesdk.addPlugin(new TextAssetSource());
 *   await cesdk.addPlugin(new TextComponentAssetSource());
 *   await cesdk.addPlugin(new VectorShapeAssetSource());
 *   await cesdk.addPlugin(new StickerAssetSource());
 *   await cesdk.addPlugin(new EffectsAssetSource());
 *   await cesdk.addPlugin(new FiltersAssetSource());
 *   await cesdk.addPlugin(new BlurAssetSource());
 *   await cesdk.addPlugin(new PagePresetsAssetSource());
 *   await cesdk.addPlugin(new CropPresetsAssetSource());
 *   await cesdk.addPlugin(new UploadAssetSources());
 *   await cesdk.addPlugin(new DemoAssetSources());
 *   await cesdk.actions.run('scene.create');
 * };
 *
 * const onError = (error: CreativeEditorError) => {
 *   console.error('SDK initialization failed:', error);
 *   // Handle error (e.g., show notification, retry logic)
 * };
 *
 * const onLoadingStateChange = (state: CreativeEditorLoadingState) => {
 *   console.log('Loading state changed:', state);
 * };
 * </script>
 * ```
 *
 * @remarks
 * - The component automatically handles SDK cleanup on unmount
 * - Uses Vue 3 Composition API for optimal performance and TypeScript support
 * - For render-time errors, we recommend using Vue's error handling mechanisms
 * @category Framework Wrapper
 * @public
 */
declare const CreativeEditor: CreativeEditorComponent;
export { CreativeEditor }
export default CreativeEditor;

/**
 * Component type for the CreativeEditor Vue component.
 * @public
 * */
export declare type CreativeEditorComponent = DefineComponent<{
    config: {
        type: PropType<Configuration>;
        required: true;
    };
    init: {
        type: PropType<(cesdk: CreativeEditorSDK) => void | Promise<void>>;
    };
    height: {
        type: PropType<string | number>;
        default: string;
    };
    width: {
        type: PropType<string | number>;
        default: string;
    };
    class: {
        type: StringConstructor;
        default: undefined;
    };
}, {}, {}, {}, {}, {}, {}, {
    'loading-state-change': (state: CreativeEditorLoadingState) => void;
    error: (error: CreativeEditorError) => void;
}>;

/**
 * Emits for the CreativeEditor Vue component.
 * @public
 */
export declare type CreativeEditorEmits = {
    /** Emitted when loading state changes */
    'loading-state-change': (state: CreativeEditorLoadingState) => void;
    /** Emitted when an error occurs */
    error: (error: CreativeEditorError) => void;
};

/**
 * Error that occurred during Creative Editor SDK initialization.
 * @public
 */
export declare interface CreativeEditorError {
    /** The error message */
    message: string;
    /** The original error object */
    cause?: unknown;
}

/**
 * Loading state of the Creative Editor SDK.
 * @public
 */
export declare type CreativeEditorLoadingState = 'idle' | 'loading' | 'loaded' | 'error';

/**
 * Props for the CreativeEditor Vue component.
 * @public
 */
export declare interface CreativeEditorProps {
    /** Configuration object for the Creative Editor SDK */
    config: Configuration;
    /** Initialization function called after SDK instance is created */
    init: (cesdk: CreativeEditorSDK) => void | Promise<void>;
    /** Height of the editor container */
    height?: number | string;
    /** Width of the editor container */
    width?: number | string;
    /** CSS class name for the container element */
    class?: string;
}

export { }