import { $applyNodeReplacement, createEditor, DecoratorNode } from 'lexical';
import * as React from 'react';
import { Suspense } from 'react';
const InlineImageComponent = React.lazy(() => import('./InlineImageComponent'));
/**
 * Gets the inline image position encoded in a wrapper class name.
 * @param className Wrapper class name to inspect.
 * @returns Matching inline image position, or undefined when no position class exists.
 */
function getPositionFromClassName(className) {
    if (className.includes('position-left')) {
        return 'left';
    }
    if (className.includes('position-right')) {
        return 'right';
    }
    if (className.includes('position-full')) {
        return 'full';
    }
    if (className.includes('position-center')) {
        return 'center';
    }
    return undefined;
}
/**
 * Converts an imported DOM image element into an InlineImageNode.
 * @param domNode DOM node provided by Lexical import.
 * @returns DOM conversion output for inline image nodes, or null for unsupported nodes.
 */
function convertInlineImageElement(domNode) {
    var _a;
    if (domNode instanceof HTMLImageElement) {
        const { alt: altText, height, src, width } = domNode;
        const position = getPositionFromClassName(((_a = domNode.parentElement) === null || _a === void 0 ? void 0 : _a.className) || '');
        const node = $createInlineImageNode({ altText, height, position, src, width });
        return { node };
    }
    return null;
}
export class InlineImageNode extends DecoratorNode {
    /**
     * Gets the Lexical node type for inline image nodes.
     * @returns Inline image node type.
     */
    static getType() {
        return 'inline-image';
    }
    /**
     * Clones an existing inline image node.
     * @param node Inline image node to clone.
     * @returns Cloned inline image node.
     */
    static clone(node) {
        return new InlineImageNode(node.__src, node.__altText, node.__position, node.__width, node.__height, node.__showCaption, node.__caption, node.__key);
    }
    /**
     * Imports a serialized inline image node into the editor state.
     * @param serializedNode Serialized inline image node payload.
     * @returns Hydrated inline image node.
     */
    static importJSON(serializedNode) {
        const { altText, caption, height, position, showCaption, src, width } = serializedNode;
        const node = $createInlineImageNode({
            altText,
            height,
            position,
            showCaption,
            src,
            width,
        });
        const nestedEditor = node.__caption;
        const editorState = nestedEditor.parseEditorState(caption.editorState);
        if (!editorState.isEmpty()) {
            nestedEditor.setEditorState(editorState);
        }
        return node;
    }
    /**
     * Defines DOM import conversions for inline image elements.
     * @returns DOM conversion map for inline image imports.
     */
    static importDOM() {
        return {
            img: () => ({
                conversion: convertInlineImageElement,
                priority: 0,
            }),
        };
    }
    /**
     * Creates an inline image node instance.
     * @param src Image source URL.
     * @param altText Accessible alt text.
     * @param position Inline image alignment position.
     * @param width Initial image width.
     * @param height Initial image height.
     * @param showCaption Whether the caption editor is visible.
     * @param caption Nested caption editor.
     * @param key Optional Lexical node key.
     */
    constructor(src, altText, position, width, height, showCaption, caption, key) {
        super(key);
        this.__src = src;
        this.__altText = altText;
        this.__width = width || 'inherit';
        this.__height = height || 'inherit';
        this.__showCaption = showCaption || false;
        this.__caption = caption || createEditor();
        this.__position = position;
    }
    /**
     * Exports this inline image node to DOM.
     * @returns DOM export output containing the inline image wrapper.
     */
    exportDOM() {
        const wrapper = document.createElement('span');
        wrapper.className = `inline-editor-image position-${this.__position || 'center'}`;
        const element = document.createElement('img');
        element.setAttribute('src', this.__src);
        element.setAttribute('alt', this.__altText);
        element.setAttribute('width', this.__width.toString());
        element.setAttribute('height', this.__height.toString());
        wrapper.appendChild(element);
        return { element: wrapper };
    }
    /**
     * Serializes this inline image node.
     * @returns Serialized inline image node payload.
     */
    exportJSON() {
        return {
            altText: this.getAltText(),
            caption: this.__caption.toJSON(),
            height: this.__height === 'inherit' ? 0 : this.__height,
            position: this.__position,
            showCaption: this.__showCaption,
            src: this.getSrc(),
            type: 'inline-image',
            version: 1,
            width: this.__width === 'inherit' ? 0 : this.__width,
        };
    }
    /**
     * Gets the image source URL.
     * @returns Image source URL.
     */
    getSrc() {
        return this.__src;
    }
    /**
     * Gets the image alt text.
     * @returns Image alt text.
     */
    getAltText() {
        return this.__altText;
    }
    /**
     * Gets whether the caption editor is visible.
     * @returns True when caption is shown.
     */
    getShowCaption() {
        return this.__showCaption;
    }
    /**
     * Gets the current inline image alignment position.
     * @returns Current inline image position.
     */
    getPosition() {
        return this.__position;
    }
    /**
     * Updates the stored image dimensions.
     * @param width Next image width.
     * @param height Next image height.
     */
    setWidthAndHeight(width, height) {
        const writable = this.getWritable();
        writable.__width = width;
        writable.__height = height;
    }
    /**
     * Updates mutable inline image fields.
     * @param payload Partial inline image update payload.
     */
    update(payload) {
        const writable = this.getWritable();
        const { altText, position, showCaption } = payload;
        if (altText !== undefined) {
            writable.__altText = altText;
        }
        if (showCaption !== undefined) {
            writable.__showCaption = showCaption;
        }
        if (position !== undefined) {
            writable.__position = position;
        }
    }
    // View
    /**
     * Creates the DOM wrapper for this inline image node.
     * @param config Lexical editor config.
     * @returns Inline image wrapper element.
     */
    createDOM(config) {
        const span = document.createElement('span');
        const className = `${config.theme.inlineImage} position-${this.__position || 'center'}`;
        if (className !== undefined) {
            span.className = className;
        }
        return span;
    }
    /**
     * Updates the DOM wrapper when node state changes.
     * @param prevNode Previous inline image node state.
     * @param dom Existing inline image wrapper element.
     * @param config Lexical editor config.
     * @returns False because the existing DOM element is reused.
     */
    updateDOM(prevNode, dom, config) {
        const position = this.__position;
        if (position !== prevNode.__position) {
            const className = `${config.theme.inlineImage} position-${position || 'center'}`;
            if (className !== undefined) {
                dom.className = className;
            }
        }
        return false;
    }
    /**
     * Renders the React decorator for this inline image node.
     * @returns Inline image decorator element.
     */
    decorate() {
        return (React.createElement(Suspense, { fallback: null },
            React.createElement(InlineImageComponent, { altText: this.__altText, caption: this.__caption, height: this.__height, nodeKey: this.getKey(), position: this.__position, showCaption: this.__showCaption, src: this.__src, width: this.__width })));
    }
}
/**
 * Creates and inserts a replacement inline image node.
 * @param payload Inline image node creation payload.
 * @returns Created inline image node.
 */
export function $createInlineImageNode({ altText, caption, height, key, position, showCaption, src, width, }) {
    return $applyNodeReplacement(new InlineImageNode(src, altText, position || 'center', width, height, showCaption, caption, key));
}
/**
 * Checks whether a Lexical node is an InlineImageNode.
 * @param node Node to test.
 * @returns True when the node is an InlineImageNode.
 */
export function $isInlineImageNode(node) {
    return node instanceof InlineImageNode;
}
//# sourceMappingURL=InlineImageNode.js.map