(function () {
    var _pluginUtils = {
        obtenerArticulos: function (search, ini) {
            let elem = $("#cardsarticlist");
            let isTs = false;

            if (search && search.match(/^\d{14}$/)) {
                isTs = true;
            }

            $.ajax({
                url: '/cgi-cpn/buscador_relacionados/prontus_buscar_relacionados.cgi',
                type: 'get',
                dataType: 'json',
                data: {
                    _prontus_id: Admin.prontus_id,
                    _ini: ini,
                    "titular-relacionados": search,
                    _ts_propio: mainFidJs.TS
                }
            }).done(function (json, textStatus) {
                    let $ulList = $('<ul/>');
                    let $container = $('<div/>', {
                        class: 'paginacion'
                    });

                    if (json.status == '1') {
                        $container.html('<div class="txt-res">Resultados de búsqueda:</div>')
                        $container.append('<div class="paginas">Página <span id="pagina-n">' + json.resultados.curr_page + '</span> de <span id="pagina-total">' + json.resultados.paginas + '</span>');

                        let links_paginacion = `
                        <div class="links">
                            <button type="button" id="btnFirst" data-page="0"><i class="mce-ico mce-i-fas fas fa-fast-backward"></i> Principio</button>
                            <button type="button" id="btnBack" data-page=""><i class="mce-ico mce-i-fas fas fa-step-backward"></i> Anterior</button>
                            <button type="button" id="btnNext" data-page=""><i class="mce-ico mce-i-fas fas fa-step-forward"></i> Siguiente</button>
                            <button type="button" id="btnLast" data-page=""><i class="mce-ico mce-i-fas fas fa-fast-forward"></i> Final</button>
                        </div>
                        `;
                        $container.append(links_paginacion);

                        $container.find('#btnBack').attr('data-page', json.resultados.prev_page);
                        $container.find('#btnNext').attr('data-page', json.resultados.next_page);
                        $container.find('#btnLast').attr('data-page', json.resultados.last_page);

                        if (typeof json.resultados.filas != "undefined") {
                            for (var i = 0; i < json.resultados.filas.length; i++) {
                                let selected = "";

                                if (isTs && search == json.resultados.filas[i].art_ts) {
                                    selected = "selected";
                                }

                                let $articLi = $('<li/>', {
                                    html: json.resultados.filas[i].art_titu_minitext,
                                    class: 'cardArticItem ' + selected,
                                    'data-ts': json.resultados.filas[i].art_ts
                                }).appendTo($ulList);
                            }
                        }
                    }

                    $("#listpagination").html($container);
                    $(elem).html($ulList);

                    $(".cardArticItem").off("click").on("click", function (e) {
                        e.preventDefault();
                        let ts = $(this).data("ts");

                        $(".cardArticItem").removeClass("selected");
                        $(this).addClass("selected");

                        console.log("cardArticItem click!");
                    });

                    $(".links button").off("click").on("click", function (e) {
                        let page = $(this).attr("data-page");

                        if (page) {
                            _pluginUtils.obtenerArticulos(search, page);
                        }
                    });
                })
                .fail(function (jqXHR, textStatus, errorThrown) {

                });
        },
        getCurrentArtic: function () {
            return $(".cardArticItem.selected").data("ts");
        },
        getCurrentArticTitular: function () {
            return $(".cardArticItem.selected").text();
        },
        getCurrentPlt: function () {
            let plt = $("#cmbCardPlt-open span").text();

            plt = plt.replace(/\s*&gt;\s*/, "/");
            plt = plt.replace(/\s*>\s*/, "/");

            return plt;
        },
        getCurrentPltExt: function () {
            let plt = $("#cmbCardPltExt-open span").text();
            plt = plt.replace(/ &gt; /, "/");

            return plt;
        },
        getCurrentUrl: function () {
            return $("#txtUrl").val();
        },
        getCurrentUrlData: function () {
            return $("#extArtJson").val();
        },
        getProntusCardName: function (ts, plt, titular) {
            let content = "Prontus Card '" + plt + "' - " + titular;

            if (ts) {
                content += " [" + ts + "]";
            } else {
                content += " [externo]";
            }

            return content;
        },
        addTitularToProntusCards: function (body) {
            let elems = body.getElementsByTagName("prontus_card");
            let articsTs = [];
            let articsExt = [];

            for (let elem of elems) {
                if (elem.getAttribute("data-ts")) {
                    articsTs.push(elem.getAttribute("data-ts"));
                }

                if (elem.getAttribute("data-url")) {
                    articsExt.push(elem);
                }
            }

            if (articsExt.length) {
                for (let ext of articsExt) {
                    let jsonData = ext.getAttribute("data-data");
                    let articPlt = ext.getAttribute("data-plt");
                    jsonData = jsonData.replace(/&quot;/g, '"');
                    let json = JSON.parse(jsonData);

                    ext.innerHTML = _pluginUtils.getProntusCardName("", articPlt, json["_txt_titular"]);
                }
            }

            if (articsTs.length) {
                $.ajax({
                    url: '/cgi-cpn/prontus_art_get_data.cgi',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        _prontus_id: Admin.prontus_id,
                        _ts: articsTs.join(","),
                        _campo: "_txt_titular"
                    }
                }).done(function (json, textStatus) {
                    if (json.status == 1) {
                        for (let elem of elems) {
                            let articTs = elem.getAttribute("data-ts");
                            let articPlt = elem.getAttribute("data-plt");

                            if (json.artics[articTs]) {
                                elem.innerHTML = _pluginUtils.getProntusCardName(articTs, articPlt, json.artics[articTs]["_txt_titular"]);
                            }
                        }
                    }
                });
            }
        },
        scrapUrl: function (url) {
            if (url) {
                $.ajax({
                    url: url,
                    type: 'get',
                    cache: false,
                    dataType: 'html'
                }).done(function (data, textStatus) {
                    if (data) {
                        let $html = $("<div>").append($.parseHTML(data));
                        //$html.find("meta[property^='og:']")
                        let titular = $html.find("meta[property='og:title']").attr("content");
                        let bajada = $html.find("meta[property='og:description']").attr("content");
                        let imagen = $html.find("meta[property='og:image']").attr("content");
                        let imagenWidth = $html.find("meta[property='og:image:width']").attr("content");
                        let imagenHeight = $html.find("meta[property='og:image:height']").attr("content");

                        $("#txtTitular").val(titular);
                        $("#txtBajada").val(bajada);
                        $("#txtImagen").val(imagen);

                        let jsonData = {
                            _txt_titular: titular,
                            _txt_bajada: bajada,
                            fotofija_art: imagen,
                            _wfotofija_art: imagenWidth,
                            _hfotofija_art: imagenHeight,
                            _fileurl: url
                        };

                        $("#extArtJson").val(JSON.stringify(jsonData));
                    }
                });
            }
        }
    };

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

        var Env = tinymce.util.Tools.resolve('tinymce.Env');
        var embedChange = Env.ie && Env.ie <= 8 ? 'onChange' : 'onInput';

        tinymce.activeEditor.on("init", function () {
            let mceBody = tinymce.activeEditor.getBody();

            // console.log("init!!", mceBody.getElementsByTagName("prontus_card"));
            _pluginUtils.addTitularToProntusCards(mceBody)
        });

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

        var getData = function (editor) {
            var element = editor.selection.getNode();
            var data_ts = element.getAttribute('data-ts');
            var data_plt = element.getAttribute('data-plt');
            var data_url = element.getAttribute('data-url');
            var data_data = element.getAttribute('data-data');

            if (data_data) {
                data_data = data_data.replace(/&quot;/g, '"');
                data_data = JSON.parse(data_data);
            }

            var the_data = {
                ts: data_ts,
                plt: data_plt,
                url: data_url,
                data: data_data
            };

            return the_data;
        };

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

                cardsPltList.push({
                    text: 'Ninguna',
                    value: 0
                });

                if (typeof vtxtCardsList != "undefined") {
                    for (var x = 0; x < vtxtCardsList.length; x++) {
                        let optText = vtxtCardsList[x];

                        if (optText.substring(0, 4) == "fid_") {
                            optText = optText.replace(/\//, " > ");
                        }

                        cardsPltList.push({
                            text: optText,
                            value: vtxtCardsList[x]
                        });
                    }
                }

                var cardsPlt = {
                    id: "cmbCardPlt",
                    type: "listbox",
                    name: 'cardplt',
                    ariaLabel: 'Plantilla',
                    onSelect: function (e) {
                        var select_data = this.value();
                    },
                    values: cardsPltList,
                    onPostRender: function () {
                        this.value(field_data.plt);
                    }
                };

                var cardsPltExternal = {
                    id: "cmbCardPltExt",
                    type: "listbox",
                    name: 'cardpltext',
                    ariaLabel: 'Plantilla',
                    onSelect: function (e) {
                        var select_data = this.value();
                    },
                    values: cardsPltList,
                    onPostRender: function () {
                        this.value(field_data.plt);
                    }
                };

                var articList = {
                    id: 'cardsarticlist',
                    type: 'container',
                    layout: 'flex',
                    direction: 'column',
                    align: 'stretch',
                    minHeight: '300',
                    minWidth: '500',
                    items: [],
                    onPostRender: function (e) {
                        _pluginUtils.obtenerArticulos(field_data.ts, 0);
                    }
                };

                // var helpBox = {
                //     type: 'label',
                //     multiline: true,
                //     layout: 'flex',
                //     text: "",
                //     onPostRender: function (e) {
                //         this.getEl().innerHTML = "<b>Selecciona un artículo de la lista haciendo click sobre el</b>"
                //     },
                //     style: "border:none;",
                // }

                var panel1Items = [
                    {
                        type: 'label',
                        layout: 'flex',
                        onPostRender: function () {
                            this.getEl().innerHTML = '<h4>Inserta artículos Prontus entre parrafos con el formato que eligas.</h4>';
                        }
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Selecciona una plantilla. Esto le dará el formato a la Prontus Card:",
                        style: "font-weight: bold;"
                    },
                    cardsPlt,
                    {
                        type: 'label',
                        layout: 'flex',
                        text: 'Selecciona un artículo de lista haciendo click sobre el:',
                        style: "font-weight: bold;"
                    },
                    {
                        type: 'container',
                        layout: 'flex',
                        spacing: 5,
                        items: [
                            {
                                type: 'textbox',
                                placeholder: 'Buscar por titular o TS',
                                size: 50,
                                value: field_data.ts,
                                id: "txtSearch"
                            },
                            {
                                type: 'button',
                                text: 'Buscar',
                                id: 'btnBuscar'
                            },
                            {
                                type: 'button',
                                text: 'Limpiar',
                                id: 'btnLimpiar'
                            }
                        ]
                    },
                    {
                        id: 'listpagination',
                        type: 'container',
                        layout: 'flex',
                        direction: 'column',
                        align: 'stretch',
                        minHeight: 75
                    },
                    articList
                ];

                var panel2Items = [
                    {
                        type: 'label',
                        layout: 'flex',
                        onPostRender: function () {
                            this.getEl().innerHTML = '<h4>Inserta artículos externos entre parrafos con el formato que eligas.</h4>';
                        }
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Selecciona una plantilla. Esto le dará el formato a la Prontus Card:",
                        style: "font-weight: bold;"
                    },
                    cardsPltExternal,
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Ingresa una URL y presiona el botón Obtener:",
                        style: "font-weight: bold;"
                    },
                    {
                        type: 'container',
                        layout: 'flex',
                        spacing: 5,
                        items: [
                            {
                                type: 'textbox',
                                placeholder: 'https://',
                                size: 55,
                                value: field_data.url,
                                id: "txtUrl"
                            },
                            {
                                type: 'button',
                                text: 'Obtener',
                                id: 'btnScrap'
                            },
                            {
                                type: 'button',
                                text: 'Limpiar',
                                id: 'btnCleanScrap'
                            }
                        ]
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Los datos serán obtenidos de las etiquetas Open Graph en el código fuente de la página.",
                        style: ""
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Datos del artículo:",
                        style: "font-weight: bold;border-top: 1px solid #e5e5e5;padding-top: 10px;"
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Titular (og:title):",
                        style: "font-weight: bold;"
                    },
                    {
                        type: 'textbox',
                        placeholder: '',
                        // size: 100,
                        value: "",
                        id: "txtTitular"
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Bajada (og:description):",
                        style: "font-weight: bold;"
                    },
                    {
                        type: 'textbox',
                        placeholder: '',
                        // size: 100,
                        value: "",
                        id: "txtBajada"
                    },
                    {
                        type: 'label',
                        multiline: true,
                        layout: 'flex',
                        text: "Imagen (og:image):",
                        style: "font-weight: bold;"
                    },
                    {
                        type: 'textbox',
                        placeholder: '',
                        // size: 100,
                        value: "",
                        id: "txtImagen"
                    },
                    {
                        type: 'textbox',
                        placeholder: '',
                        value: "",
                        id: "extArtJson",
                        style: "display: none"
                    }
                ];

                var windowPanels = [
                    {
                        title: "Artículos Prontus",
                        type: "form",
                        // layout: 'flex',
                        // direction: 'column',
                        // align: 'stretch',
                        // padding: 10,
                        // spacing: 10,
                        items: panel1Items
                    },
                    {
                        title: "Artículos externos",
                        type: "form",
                        // layout: 'flex',
                        // direction: 'column',
                        // align: 'stretch',
                        // padding: 10,
                        // spacing: 10,
                        items: panel2Items
                    }
                ];

                the_window = editor.windowManager.open({
                    title: 'Prontus Card',
                    data: field_data,
                    bodyType: 'tabpanel',
                    stateSelector: ["prontus_card_tab"],
                    body: windowPanels,
                    onPostRender: function (e) {
                        if (field_data["url"]) {
                            this.items()[0].activateTab(1);
                        } else {
                            this.items()[0].activateTab(0);
                        }
                    },
                    onSubmit: function () {
                        submitForm(the_window, editor);
                    }
                });

                $("#btnBuscar").on("click", function () {
                    let search = $("#txtSearch").val();
                    _pluginUtils.obtenerArticulos(search, 0);
                });

                $("#btnLimpiar").on("click", function () {
                    $("#txtSearch").val("");
                    _pluginUtils.obtenerArticulos("", 0);
                });

                $("#btnScrap").on("click", function () {
                    let url = $("#txtUrl").val();
                    _pluginUtils.scrapUrl(url);
                });
            }
        };

        var submitForm = function (win, editor) {
            var element = tinymce.activeEditor.selection.getNode();
            var activeTab = win.items()[0].activeTabId;

            // console.log(activeTab);

            if (activeTab == "t0") {
                var attrs = {
                    'data-ts': _pluginUtils.getCurrentArtic(),
                    'data-plt': _pluginUtils.getCurrentPlt()
                };

                if (!attrs['data-plt'] || attrs['data-plt'] == "Ninguna") {
                    handleError(editor, 'Debes seleccionar una plantilla.');
                    return false;
                }

                if (!attrs['data-ts']) {
                    handleError(editor, 'Debes seleccionar un artículo.');
                    return false;
                }

                var content = _pluginUtils.getProntusCardName(attrs["data-ts"], attrs["data-plt"], _pluginUtils.getCurrentArticTitular());

                // Actualizar atributos.
                if (element.tagName.toLowerCase() == 'prontus_card') {
                    element.setAttribute('data-ts', attrs['data-ts']);
                    element.setAttribute('data-plt', attrs['data-plt']);

                    element.innerHTML = content;
                }  else {
                    element = tinymce.activeEditor.selection.setNode(tinymce.activeEditor.dom.create('prontus_card', attrs, content));
                }
            } else {
                var extUrl = _pluginUtils.getCurrentUrl();

                if (extUrl) {
                    var jsonData = _pluginUtils.getCurrentUrlData();

                    if (!jsonData) {
                        handleError(editor, 'No se obtuvieron los datos de la URL.');
                        return false;
                    }

                    var attrs = {
                        'data-url': extUrl,
                        'data-plt': _pluginUtils.getCurrentPltExt(),
                        'data-data': jsonData
                    };

                    if (!attrs['data-plt'] || attrs['data-plt'] == "Ninguna") {
                        handleError(editor, 'Debes seleccionar una plantilla.');
                        return false;
                    }

                    let articData = JSON.parse(jsonData);

                    var content = _pluginUtils.getProntusCardName("", attrs["data-plt"], articData["_txt_titular"]);

                    // Actualizar atributos.
                    if (element.tagName.toLowerCase() == 'prontus_card') {
                        element.setAttribute('data-url', extUrl);
                        element.setAttribute('data-plt', attrs['data-plt']);
                        element.setAttribute('data-data', jsonData);

                        element.innerHTML = content;
                    }  else {
                        element = tinymce.activeEditor.selection.setNode(tinymce.activeEditor.dom.create('prontus_card', attrs, content));
                    }

                } else {
                    handleError(editor, 'Debes ingresar una URL y obtener los datos.');
                    return false;
                }
            }

            return true;
        };

        var registerButton = {
            register: function (editor) {
                editor.addButton('prontus_cards', {
                    image: '/prontus/cpan/imag/logo/prontus-logo-bw-40x40w.png',
                    text: 'Card',
                    tooltip: 'Prontus Card',
                    id: 'vtxt-prontuscard-button',
                    onclick: function () {
                        windowOpener.open(editor);
                    }
                });
            }
        };

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

        function Plugin() {}

        return Plugin;

    }());
})();