// JSX typings for React 19 (which sets custom element properties and adds listeners for on<event> props):
//   import type {} from '@labelviewer/elements/react';
// React 19 passes `value`, `sampleData`, `saveHandler`... as properties, and `onchange` / `onsave` / `onselect` /
// `onrender` / `onerror` (lower case: the event name follows "on") as event listeners. React 18 only sets string
// attributes: use a ref for object/function properties and addEventListener for the events (docs/sdk.md, React).
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

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

type Base<E> = Omit<DetailedHTMLProps<HTMLAttributes<E>, E>, 'onChange' | 'onSelect' | 'onError' | 'onChangeCapture' | 'onSelectCapture' | 'onErrorCapture'>;

export interface ZplEditorProps extends Base<ZplEditorElement> {
    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;
    'onsample-load'?: (e: CustomEvent<ZplSampleLoadDetail>) => void;
    'ondirty-change'?: (e: CustomEvent<ZplDirtyChangeDetail>) => void;
}

export interface ZplViewerProps extends Base<ZplViewerElement> {
    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 'react' {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements {
            'zpl-editor': ZplEditorProps;
            'zpl-viewer': ZplViewerProps;
        }
    }
}