{% extends '@bolt/editcontent/fields/_textarea.twig' %}

{% set keyClean = key|replace({ '-': '_', '.':'_', '[':'_', ']':'_', '{':'_', '}':'_' }) %}

{% block fieldset_controls %}

    {% set attributes = {
        text: {
            class:           (option.class ~ ' structured-content'),
            data_errortext:  option.errortext,
            name:            name,
            required:        option.required,
            style:           option.height ? 'height: ' ~ option.height ~ ';' : '',
        }
    } %}

    <button type="button" id="sirTrevorIntegration_{{ keyClean }}_src_toggle" class="structured-content src-toggle">
        <span class="on">SRC</span>
        <span class="off">VIS</span>
    </button>

    {{ parent() }}

    {# Gets the white list of blocks and transforms them to be passed to JS #}
    {% set jsBlocks = field.blocks|join("','") %}
    {# Packs the entire config #}
    {% set extend = field.extend|json_encode %}

    <script>
        $(window).on('load', function() {

            var blockTypes = {% if jsBlocks %} ['{{ jsBlocks|raw }}'] {% else %} [] {% endif %};

            var sirTrevorIntegration_{{ keyClean }} = new CnStructuredContent({
                defaults: {
                    user: {
                        roles: {{ user.roles|json_encode|raw }}
                    },
                    iconUrl: '{{ paths.extensions }}/vendor/cnd/bolt-structured-content/images/sir-trevor-icons.svg',
                    uploadUrl: '{{ paths.bolt }}structuredcontent/image/upload',
                    baseImageUrl: '{{ paths.files }}',
                    extend: {{ extend|raw }},
                    {# the white list of blocks can be setup in the content type. The property is called: blocks: []  #}
                    {% if jsBlocks %} blockTypes: ['{{ jsBlocks|raw }}'] {% endif %}
                },
                elementSelector: 'textarea[name="{{ name }}"]'
            });

            $(document).trigger('SirTrevor.DynamicBlock.All');

            if (typeof(sirTrevorIntegration_{{ keyClean }}.initCustomTextBlock) === 'function') {
                // TODO: Find a better way to integrate the custom blocks
                {% for block,text in field.extend %}
                {% if(field.extend[block] is defined and field.extend[block].type|default == 'custom_text') %}
                if (sirTrevorIntegration_{{ keyClean }}.options.defaults.blockTypes.indexOf('{{ block }}') > -1) {
                    sirTrevorIntegration_{{ keyClean }}.initCustomTextBlock({
                        label: '{{ text.label }}',
                        type: '{{ block }}',
                        class: '{{ text.class }}'
                    });
                }
                {% endif %}
                {% endfor %}
            }

            sirTrevorIntegration_{{ keyClean }}.init();

            /**
             * Chechs the new json and if it doesn't work and the strict mode is active
             * resets the content with the last working one
             */
            function toStructuredContent(strict) {

                strict = strict || false;

                try{

                    var data = JSON.parse($('textarea[name="{{ name }}"]').val());
                    if(!data) {
                        throw new Error('Invalid json for field {{ ( block('fieldset_label_text') )|escape('js') }}');
                    }

                    sirTrevorIntegration_{{ keyClean }}.reinitialize();

                } catch(error) {

                    if(strict === true || confirm('Invalid Json for field {{ ( block('fieldset_label_text') )|escape('js') }}. Would you like to revert the changes? ') )
                        fromStructuredContent();

                    return false;
                }

                return true;

            }

            /**
             * Updates the textarea with the current working state so the StirTrevor content
             */
            function fromStructuredContent() {

                var data = sirTrevorIntegration_{{ keyClean }}.getCurrentStore();
                $('textarea[name="{{ name }}"]').val(JSON.stringify(data));

            }

            /**
             *  Toggles the Label of the button
             */
            function toggleOnOffButton() {
                $('#sirTrevorIntegration_{{ keyClean }}_src_toggle').find('.on').toggle();
                $('#sirTrevorIntegration_{{ keyClean }}_src_toggle').find('.off').toggle();
            }

            $('textarea[name="{{ name }}"]').on('change', function(){
                toStructuredContent();
            });

            /**
             * Switcher between Scr and Visual mode
             */
            $('#sirTrevorIntegration_{{ keyClean }}_src_toggle').on('click', function(){

                if($('textarea[name="{{ name }}"]').is(":visible")) {

                    if(!toStructuredContent())
                        return;

                    toggleOnOffButton();

                    $('textarea[name="{{ name }}"]').hide();
                    $('textarea[name="{{ name }}"]').siblings('div').show();

                } else {

                    fromStructuredContent();
                    toggleOnOffButton();
                    $('textarea[name="{{ name }}"]').show();
                    $('textarea[name="{{ name }}"]').siblings('div').hide();

                }

            }).find('.off').hide();

        });
    </script>

{% endblock fieldset_controls %}