"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MermaidView = exports.STOP_EVENT_CLASSNAME = exports.cnMermaid = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../../../classname.js");
const TextInput_1 = require("../../../../forms/TextInput.js");
const common_1 = require("../../../../i18n/common/index.js");
const react_utils_1 = require("../../../../react-utils/index.js");
const utils_1 = require("../../../../utils/index.js");
const const_1 = require("../MermaidSpecs/const.js");
exports.cnMermaid = (0, classname_1.cn)('Mermaid');
exports.STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
require("./Mermaid.css");
const b = exports.cnMermaid;
const MermaidPreview = ({ mermaidInstance, text = '', }) => {
    const [svg, setSvg] = (0, react_1.useState)();
    const [error, setError] = (0, react_1.useState)(null);
    (0, react_1.useEffect)(() => {
        const p = async () => {
            if (mermaidInstance) {
                try {
                    // Validates syntax and throws error if text is invalid
                    await mermaidInstance.parse(text);
                    const { svg: S } = await mermaidInstance.render(`mermaid-${Date.now()}`, text);
                    setSvg(S);
                    setError(null);
                }
                catch (e) {
                    setError(e.message);
                }
            }
        };
        p();
    }, [mermaidInstance, text]);
    if (error) {
        return (0, jsx_runtime_1.jsx)("div", { className: b('Error'), children: error && (0, jsx_runtime_1.jsx)("div", { children: error }) });
    }
    return ((0, jsx_runtime_1.jsx)("div", { className: b('Preview'), children: svg ? (0, jsx_runtime_1.jsx)("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : (0, jsx_runtime_1.jsx)(uikit_1.Loader, {}) }));
};
const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
    const [text, setText] = (0, react_1.useState)(initialText || '');
    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }), (0, jsx_runtime_1.jsxs)("div", { className: b('Editor'), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TextInput_1.TextAreaFixed, { controlProps: {
                                className: exports.STOP_EVENT_CLASSNAME,
                            }, value: text, onUpdate: (v) => {
                                setText(v);
                            }, autoFocus: true }) }), (0, jsx_runtime_1.jsx)("div", { className: b('Controls'), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: onCancel, view: 'flat', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('cancel') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: () => onSave(text), view: 'action', children: (0, jsx_runtime_1.jsx)("span", { className: exports.STOP_EVENT_CLASSNAME, children: (0, common_1.i18n)('save') }) })] }) })] })] }));
};
const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
    const [mermaidInstance, setMermaidInstance] = (0, react_1.useState)(null);
    const [editing, setEditing, unsetEditing, toggleEditing] = (0, react_utils_1.useBooleanState)(Boolean(node.attrs[const_1.MermaidConsts.NodeAttrs.newCreated]));
    const [menuOpen, , closeMenu, toggleMenuOpen] = (0, react_utils_1.useBooleanState)(false);
    const [anchorElement, setAnchorElement] = (0, react_utils_1.useElementState)();
    (0, react_1.useEffect)(() => {
        const waitForMermaid = () => setTimeout(() => {
            const instance = getMermaidInstance();
            if (instance) {
                setMermaidInstance(instance);
                return;
            }
            waitForMermaid();
        }, 100);
        waitForMermaid();
    }, []);
    if (editing) {
        return ((0, jsx_runtime_1.jsx)(DiagramEditMode, { initialText: node.attrs[const_1.MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
                onChange({ [const_1.MermaidConsts.NodeAttrs.content]: v });
                unsetEditing();
            } }));
    }
    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), onDoubleClick: setEditing, children: [(0, jsx_runtime_1.jsx)(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[const_1.MermaidConsts.NodeAttrs.content] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: 's', className: exports.STOP_EVENT_CLASSNAME, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Ellipsis, className: exports.STOP_EVENT_CLASSNAME }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: menuOpen, anchorElement: anchorElement, onOpenChange: closeMenu, placement: "bottom-end", children: (0, jsx_runtime_1.jsxs)(uikit_1.Menu, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { onClick: () => {
                                        toggleEditing();
                                        closeMenu();
                                    }, children: (0, common_1.i18n)('edit') }), (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { onClick: () => {
                                        const pos = getPos();
                                        if (pos === undefined)
                                            return;
                                        (0, utils_1.removeNode)({
                                            node,
                                            pos,
                                            tr: view.state.tr,
                                            dispatch: view.dispatch,
                                        });
                                    }, children: (0, common_1.i18n)('remove') })] }) })] })] }));
};
exports.MermaidView = MermaidView;
//# sourceMappingURL=MermaidView.js.map
