{% import "_includes/forms" as forms %}

{{ forms.textField({
    label: "Heading"|t('sprout-notes'),
    name: 'heading',
    value: widget.heading,
    errors: widget.getErrors('heading')
}) }}

<div id="textarea-wrapper" class="hidden">
    {{ forms.textareaField({
        label: "Notes"|t('sprout-notes'),
        name: 'notes',
        id: 'notes-textarea',
        class: 'sprout-notes',
        value: widget.notes,
        errors: widget.getErrors('notes')
    }) }}
</div>

<div id="quill-wrapper">
    <div class="field">
        <div class="heading">
            <label for="quill">Notes</label>
        </div>
        <div class="input sprout-notes-quill-editor-wrapper">
            <div class="text sproutnotes fullwidth quill-editor" id="notes-quill">
                {{ widget.notes|raw }}
            </div>
        </div>
    </div>
</div>

{{ forms.selectField({
    label: "Format"|t('sprout-notes'),
    id: 'output',
    name: 'output',
    options: widget.options,
    value: (widget.output is defined) ? widget.output : '',
}) }}


{% css %}
    textarea.text.sprout-notes {
        min-height: 200px;
    }
    .sprout-notes-quill-editor-wrapper {
        padding-top: 30px;
    }
    .sprout-notes-quill-editor-wrapper .ql-toolbar {
        margin-top: -30px;
    }
    #{{ namespace }}-quill-wrapper .quill-editor {
        min-height: 200px;
    }
    #{{ namespace }} .quill-editor.ql-container {
        padding: 0;
    }
    body .ql-editor ol,
    #{{ namespace }}-quill-wrapper .ql-editor ul {
        padding-left: .5em;
    }
{% endcss %}

{% js %}

$(document).ready(function() {
    var $quillWrapper = $("#{{ namespace }}-quill-wrapper");
    var textareaInput = $("#{{ namespace }}-notes-textarea");
    var initSelectValue = $("#{{ namespace }}-output").val();
    var $textareaWrapper = $("#{{ namespace }}-textarea-wrapper");

    var quill = new Quill('#{{ namespace }}-notes-quill', {
        bounds: "#{{ namespace }}-quill-wrapper .quill-editor",
        modules: {
            toolbar: [
                ['bold', 'italic', 'link'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }]
            ]
        },
        theme: 'snow'
    });

    quill.on('text-change', function(delta) {
        textareaInput.val(quill.root.innerHTML);
    });

    if (initSelectValue == "richText") {
        $quillWrapper.removeClass('hidden');
    }
    else{
        // Add hidden class to quillWrapper here instead of directly on
        // HTML element to avoid a display issue when editing Notes widget
        $quillWrapper.addClass('hidden');
        $textareaWrapper.removeClass('hidden');
    }

    $("#{{ namespace }}-output").on('change', function() {

        var textareaType = $(this).val();

        if (textareaType == "richText") {
            $textareaWrapper.addClass('hidden');
            $quillWrapper.removeClass('hidden');
        }
        else
        {
            if (!$quillWrapper.hasClass('hidden'))
            {
                $quillWrapper.addClass('hidden');
            }

            $textareaWrapper.removeClass('hidden');
        }
    });
});

{% endjs %}