RED.editor.mermaid = (function () {
    let initializing = false
    let loaded = false
    let pendingEvals = []
    let diagramIds = 0

    function render(selector = '.mermaid') {
        // $(selector).hide()
        if (!loaded) {
            pendingEvals.push(selector)
            
            if (!initializing) {
                initializing = true
                $.getScript(
                    'vendor/mermaid/mermaid.min.js',
                    function (data, stat, jqxhr) {
                        mermaid.initialize({
                            startOnLoad: false,
                            theme: RED.settings.get('mermaid', {}).theme
                        })
                        loaded = true
                        while(pendingEvals.length > 0) {
                            const pending = pendingEvals.shift()
                            render(pending)
                        }
                    }
                )
            }
        } else {
            const nodes = document.querySelectorAll(selector)

            nodes.forEach(async node => {
                if (!node.getAttribute('mermaid-processed')) {
                    const mermaidContent = node.innerText
                    node.setAttribute('mermaid-processed', true)
                    try {
                        const { svg } = await mermaid.render('mermaid-render-'+Date.now()+'-'+(diagramIds++), mermaidContent);
                        node.innerHTML = svg
                    } catch (err) {
                        $('<div>').css({
                            fontSize: '0.8em',
                            border: '1px solid var(--red-ui-border-color-error)',
                            padding: '5px',
                            marginBottom: '10px',
                        }).text(err.toString()).prependTo(node)
                    }
                }
            })
        }
    }  
    return {
        render: render,
    };
})();
