// Template typings for Vue 3 (volar / vue-tsc):  import type {} from '@labelviewer/elements/vue';
// Also tell the compiler the tags are custom elements: compilerOptions.isCustomElement = tag => tag.startsWith('zpl-').
import type { DefineComponent } from 'vue';

import type {
    ZplChangeDetail, ZplData, ZplDirtyChangeDetail, ZplDpmm, ZplErrorDetail, ZplRenderDetail, ZplSample, ZplSampleLoadDetail, ZplSaveDetail, ZplSaveHandler, ZplSelectDetail, ZplZoom,
} from './index.js';

export interface ZplEditorVueProps {
    value?: string;
    sampleData?: ZplData;
    'sample-data'?: string;
    dpmm?: ZplDpmm | `${ZplDpmm}`;
    width?: number | string;
    height?: number | string;
    upright?: boolean | 'true' | 'false';
    zoom?: ZplZoom | string;
    apiBase?: string;
    'api-base'?: string;
    fontsBaseUrl?: string;
    'fonts-base-url'?: string;
    readonly?: boolean;
    features?: string;
    autosaveKey?: string;
    'autosave-key'?: string;
    samples?: ZplSample[];
    saveHandler?: ZplSaveHandler;
    warnUnsaved?: boolean;
    'warn-unsaved'?: boolean | '';
    onChange?: (e: CustomEvent<ZplChangeDetail>) => void;
    onSave?: (e: CustomEvent<ZplSaveDetail>) => void;
    onSelect?: (e: CustomEvent<ZplSelectDetail>) => void;
    onRender?: (e: CustomEvent<ZplRenderDetail>) => void;
    onError?: (e: CustomEvent<ZplErrorDetail>) => void;
    onSampleLoad?: (e: CustomEvent<ZplSampleLoadDetail>) => void;
    onDirtyChange?: (e: CustomEvent<ZplDirtyChangeDetail>) => void;
}

export interface ZplViewerVueProps {
    zpl?: string;
    data?: ZplData | string;
    record?: number | string | null;
    dpmm?: ZplDpmm | `${ZplDpmm}`;
    width?: number | string;
    height?: number | string;
    upright?: boolean | 'true' | 'false';
    zoom?: ZplZoom | string;
    label?: number | string;
    alt?: string;
    fontsBaseUrl?: string;
    'fonts-base-url'?: string;
    apiBase?: string;
    'api-base'?: string;
    onRender?: (e: CustomEvent<ZplRenderDetail>) => void;
    onError?: (e: CustomEvent<ZplErrorDetail>) => void;
}

declare module 'vue' {
    interface GlobalComponents {
        'zpl-editor': DefineComponent<ZplEditorVueProps>;
        'zpl-viewer': DefineComponent<ZplViewerVueProps>;
    }
}