{% include 'django/forms/widgets/textarea.html' %}
{{ options | json_script:options_id }}
{{ toolbar | json_script:toolbar_id }}
{% if csp_nonce %}<script nonce="{{ csp_nonce }}" type="text/javascript">
{% elif request.csp_nonce %}<script nonce="{{ request.csp_nonce }}" type="text/javascript">
{% else %}<script type="text/javascript">{% endif %}
(function() {
    const options = JSON.parse(document.getElementById('{{ options_id }}').textContent);
    const toolbar = JSON.parse(document.getElementById('{{ toolbar_id }}').textContent).map(function(item) {
        // EasyMDE uses button names as CSS classes; 'table' conflicts with Bootstrap's .table
        if (item === 'table') return {name: 'mdf-table', action: EasyMDE.drawTable, className: 'fa fa-table', title: 'Insert Table'};
        return item;
    });
    const editorOptions = Object.assign({
        element: document.getElementById('{{ widget.attrs.id }}'),
        autoDownloadFontAwesome: false,
        toolbar: toolbar,
        spellChecker: false,
        parsingConfig: {
            allowAtxHeaderWithoutSpace: true,
        },
    }, options);
    {% if preview_url %}
    const previewUrl = '{{ preview_url|escapejs }}';
    const validatorName = '{{ validator_name|escapejs }}';

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    let debounceTimer = null;

    editorOptions.previewRender = function(plainText, preview) {
        preview.innerHTML = 'Loading preview\u2026';

        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(function() {
            const body = new URLSearchParams();
            body.append('text', plainText);
            body.append('validator', validatorName);

            fetch(previewUrl, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                },
                body: body,
            })
            .then(function(response) { return response.json(); })
            .then(function(data) {
                if (data.html !== undefined) {
                    preview.innerHTML = data.html;
                } else {
                    preview.textContent = data.error || 'Preview failed';
                }
            })
            .catch(function() {
                preview.textContent = plainText;
            });
        }, 300);

        return 'Loading preview\u2026';
    };
    {% endif %}
    new EasyMDE(editorOptions);
})();
</script>
