import { jsx as _jsx } from "react/jsx-runtime";
import { imageBlockConfig, imageParse } from "@endexai/blocknote-core";
import { RiImage2Fill } from "react-icons/ri";
import { createReactBlockSpec, } from "../../schema/ReactBlockSpec.js";
import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
import { FigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/FigureWithCaption.js";
import { ResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/ResizableFileBlockWrapper.js";
import { LinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/LinkWithCaption.js";
export const ImagePreview = (props) => {
    const resolved = useResolveUrl(props.block.props.url);
    return (_jsx("img", { className: "bn-visual-media", src: resolved.loadingState === "loading"
            ? props.block.props.url
            : resolved.downloadUrl, alt: props.block.props.caption || "BlockNote image", contentEditable: false, draggable: false }));
};
export const ImageToExternalHTML = (props) => {
    if (!props.block.props.url) {
        return _jsx("p", { children: "Add image" });
    }
    const image = props.block.props.showPreview ? (_jsx("img", { src: props.block.props.url, alt: props.block.props.name || props.block.props.caption || "BlockNote image", width: props.block.props.previewWidth })) : (_jsx("a", { href: props.block.props.url, children: props.block.props.name || props.block.props.url }));
    if (props.block.props.caption) {
        return props.block.props.showPreview ? (_jsx(FigureWithCaption, { caption: props.block.props.caption, children: image })) : (_jsx(LinkWithCaption, { caption: props.block.props.caption, children: image }));
    }
    return image;
};
export const ImageBlock = (props) => {
    return (_jsx(ResizableFileBlockWrapper, { ...props, buttonText: props.editor.dictionary.file_blocks.image.add_button_text, buttonIcon: _jsx(RiImage2Fill, { size: 24 }), children: _jsx(ImagePreview, { ...props }) }));
};
export const ReactImageBlock = createReactBlockSpec(imageBlockConfig, {
    render: ImageBlock,
    parse: imageParse,
    toExternalHTML: ImageToExternalHTML,
});
//# sourceMappingURL=ImageBlockContent.js.map