{% import "_includes/forms" as forms %}
{% set selectId = view.namespaceInputId("output") %}
{% set selectTextarea = view.namespaceInputId("textarea") %}
{% set quillEditor = view.namespaceInputId("quill") %}
{% set quillWrapper = view.namespaceInputId("quill-wrapper") %}
{% set textareaWrapper = view.namespaceInputId("textarea-wrapper") %}
{% set notesIntructions = 'Add your field notes below. Note: The name of your Notes field above will be used as the first line of your notes.'|t('sprout-base') %}

<div id="{{ 'quill-wrapper' }}" class="hidden">
    <div class="field">
        <div class="heading">
            <label for="{{ 'quill' }}">Notes</label>
            <div class="instructions">
                <p>{{ notesIntructions }}</p>
            </div>
        </div>
        <div class="text sproutnotes fullwidth quill-editor"
             id="{{ 'quill' }}">{{ field.notes|raw }}</div>
    </div>
</div>

<div id="{{ 'textarea-wrapper' }}" class="hidden">
    {{ forms.textareaField({
        id:   "textarea",
        label: 'Notes'|t,
        instructions: notesIntructions,
        name: 'notes',
        class: 'sproutnotes',
        value: field.notes
    }) }}
</div>

{{ forms.selectField({
    id: "output",
    name: 'output',
    label: 'Format',
    options: options.output,
    value: field.output
}) }}

{{ forms.selectField({
    id: 'style',
    name: 'style',
    label: 'Style',
    instructions: 'Choose the styles to apply to your Notes field. See the docs for how to add custom styles.',
    options: styles,
    value: field.style
}) }}

{{ forms.lightswitchField ({
    label: "Hide Field Label"|t,
    instructions: ""|t,
    name: 'hideLabel',
    on: field.hideLabel,
}) }}

{% css %}
    textarea.sproutnotes {
        min-height: 125px;
    }

    .quill-editor {
        height: auto;
        min-height: 120px;
    }
    .quill-editor p,
    .quill-editor ul,
    .quill-editor ol {
        margin-bottom: 10px;
    }
{% endcss %}

{% js %}

    $(document).ready(function() {

        var initSelectValue = $("{{ '#' ~ selectId }}").val();
        var textareaInput = $("#{{ selectTextarea }}");
        var $textareaWrapper = $("#{{ textareaWrapper }}");
        var $quillWrapper = $("#{{ quillWrapper }}");

        var quill = new Quill('#{{ quillEditor }}', {
            bounds: ".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 {
            $textareaWrapper.removeClass('hidden');
        }

        $("{{ '#' ~ selectId }}").on('change', function() {

            var textareaType = $(this).val();
            var textareaValue = $("#{{ selectTextarea }}").val();

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

                $textareaWrapper.removeClass('hidden');
                // copy from rich text
                //textareaInput.val(textareaInput.text());
            }
        });
    });

{% endjs %}