(function () {
    var html_insert = (function () {
        'use strict';

        var Env = tinymce.util.Tools.resolve('tinymce.Env');

        /* Muestra mensajes de error en el editor. */
        var handleError = function (editor, error) {
            var errorMessage = error ? 'Include HTML: ' + error : 'Error desconocido.';
            editor.notificationManager.open({
                type: 'error',
                text: errorMessage
            });
        };

        var submitForm = function (win, editor) {
            var data = win.toJSON();
            var attrs = {}; // se rellena con los datos a cargar en el elemento. No se usa si se edita un elemento existente.
            var the_content = 'Código HTML';
            var element = tinymce.activeEditor.selection.getNode();

            if (data.insert_html_code == '') {
                handleError(editor, 'Debes ingresar el código HTML a incluir');
                return false;
            } else {
                if(element.tagName.toLowerCase() == 'html_insert') {
                    element.setAttribute('data-code',tinymce.activeEditor.dom.encode(data.insert_html_code));
                    element.innerHTML = the_content;
                } else {
                    attrs['data-code'] = tinymce.activeEditor.dom.encode(data.insert_html_code);
                }
            }
            // si el elemento seleccionado con el cursor es un tag html_insert, lo edito.
            // De otro modo, creo primero un tag de ese tipo y lo relleno.
            if(element.tagName.toLowerCase() !== 'html_insert') {
                element = tinymce.activeEditor.selection.setNode(tinymce.activeEditor.dom.create('html_insert', attrs, the_content));
            }
            return true;
        };

        // si el cursor está sobre un elemento Include HTML, tomamos los datos y rellenamos los campos.
        var getData = function (editor) {
            var element = editor.selection.getNode();
            var code = element.getAttribute('data-code');
            if (code != null) {
                code = tinymce.activeEditor.dom.decode(code);
            } else {
                code = '';
            }

            var the_data = {
                include_type: 'html',
                html_code: code
            }
            return the_data;
        };

        var windowOpener = {
            open: function (editor) {
                // datos recibidos por el modal desde el editor.
                var field_data = getData(editor);
                var the_window;

                /* campo para ingreso de código HTML. */
                var embedHTMLTextBox = {
                    id: 'mcehtmltext',
                    type: 'textbox',
                    flex: 1,
                    placeholder: 'Ingresa código HTML aquí',
                    name: 'insert_html_code',
                    value: field_data.html_code || '',
                    multiline: true,
                    rows: 5,
                    ariaLabel: 'Source'
                };

                /* texto descriptivo */
                var embedHelpBox = {
                    type: 'label',
                    multiline: true,
                    layout: 'flex',
                    text: "",
                    onPostRender: function (e) { // se hace de este modo para poder poner código html en el mensaje.
                        this.getEl().innerHTML = "<b>Importante</b>: La representación en el VTXT es sólo gráfica, a modo de ayuda.<br> Dependiendo del HTML incluído el resultado podría ser diferente. <br>No coloques 2 o más bloques \"Insert\" seguidos: el editor dejará sólo el primero."
                    },
                    style: "border:none;",
                };

                // diálogo para incluir código HTML
                var HTMLitems = [{
                    type: 'container',
                    layout: 'flex',
                    direction: 'column',
                    align: 'stretch',
                    padding: 10,
                    spacing: 10,
                    items: [,
                        {
                            type: 'label',
                            multiline: true,
                            layout: 'flex',
                            text: "",
                            onPostRender: function () {
                                this.getEl().innerHTML = "Puedes insertar código HTML directamente.<br>Verifica la correcta sintaxis y lógica del código."
                            },
                            style: "border:none;"
                        },
                        embedHTMLTextBox,
                        embedHelpBox
                    ]
                }];

                the_window = editor.windowManager.open({
                    title: 'Incluir HTML',
                    data: field_data,
                    body: HTMLitems,
                    onSubmit: function () {
                        submitForm(the_window, editor);
                    }
                });
            }
        };

        var registerButton = {
            register: function (editor) {
                editor.addButton('html_insert', {
                    icon: 'fab fa-html5',
                    tooltip: 'Incluir HTML',
                    onclick: function () {
                        windowOpener.open(editor);
                    }
                });
            }
        };

        tinymce.PluginManager.add('html_insert', function (editor, url) {
            registerButton.register(editor);
        });

        function Plugin() {}

        return Plugin;

    }());
})();
