class Utils {
    static humanFileSize(bytes, si = false, dp = 2) {
        const thresh = si ? 1000 : 1024;
        if (Math.abs(bytes) < thresh) {
            return bytes + ' B';
        }
        const units = si
            ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
            : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
        let u = -1;
        const r = 10 ** dp;
        do {
            bytes /= thresh;
            ++u;
        } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);

        return bytes.toFixed(dp) + ' ' + units[u];
    }

    static serialize(data) {
        let obj = {};
        for (let [key, value] of data) {
            if (obj[key] !== undefined) {
                if (!Array.isArray(obj[key])) {
                    obj[key] = [obj[key]];
                }
                obj[key].push(value);
            } else {
                obj[key] = value;
            }
        }
        return obj;
    }

    static getIdFromName(name) {
        return name.match(/\d+/)[0];
    }

}
class Elementos {
    static domElement = document.getElementById("widget-videoma");
    static mainDiv = document.createElement('div');
    static loaderOverlay = document.createElement('div');
    static gearLoader = document.createElement('div');
    static formContainer = document.createElement('div');
    static formMainDiv = document.createElement('div');
    static menuIconDiv = document.createElement('div');
    static fichaContainer = document.createElement('div');
    static mediaContainer = document.createElement('div');
    static metaContainer = document.createElement('div');
    static headerContainer = document.createElement('div');
    static gridDiv = document.createElement('div');
    static galleryClass;
    static galleryTitle = document.createElement('span');
    static gallery = document.createElement('div');
    static pagination = document.createElement('div');

    static btnDownload = document.createElement('button');
    static btnInfo = document.createElement('button');
    static buttonClose = document.createElement('button');
    static buttonNext = document.createElement('button');
    static buttonPrev = document.createElement('button');

    static titleH1 = document.createElement('span');
    static typeSpan = document.createElement('span');
    static sizeSpan = document.createElement('span');

    static createLoader() {
        Elementos.loaderOverlay.classList.add("wv-loader-overlay");
        Elementos.crateGearLoader();
        Elementos.mainDiv.appendChild(Elementos.loaderOverlay);
    }

    static crateGearLoader() {
        const text = document.createTextNode('Cargando datos iniciales');
        const paragraph = document.createElement('p');
        paragraph.appendChild(text);
        const gear = document.createElement('div');
        gear.classList.add("vw-gerar");
        Elementos.gearLoader.classList.add("vw-gear-loader");
        Elementos.gearLoader.append(gear, paragraph);
        Elementos.loaderOverlay.appendChild(Elementos.gearLoader);
    }

    static createCheckbox(name, id, value, checked) {
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = name;
        checkbox.id = id + '_' + value;
        checkbox.value = value;
        checkbox.checked = checked;
        return checkbox;
    }

    static createMenuHamburger() {
        const hamburger = '<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path id="id_102" fill="currentColor" d="M24,3H8C5.2,3,3,5.2,3,8v16c0,2.8,2.2,5,5,5h16c2.8,0,5-2.2,5-5V8C29,5.2,26.8,3,24,3z M22,21H10c-0.6,0-1-0.4-1-1 s0.4-1,1-1h12c0.6,0,1,0.4,1,1S22.6,21,22,21z M22,17H10c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S22.6,17,22,17z M22,13H10 c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S22.6,13,22,13z"></path></svg>';
        const menuDiv = document.createElement('div');
        Elementos.menuIconDiv.innerHTML = hamburger;
        menuDiv.classList.add("vw-menu-container");
        menuDiv.appendChild(Elementos.menuIconDiv);
        return menuDiv;
    }


    static createFormContainer() {
        Elementos.formContainer = document.createElement('div');
        Elementos.formContainer.classList.add("vw-form-container");
        // Elementos.formContainer.classList.add("active");
        const formLeftDiv = document.createElement('div');
        formLeftDiv.classList.add("vw-form-left");
        const formRightDiv = document.createElement('div');
        formRightDiv.classList.add("vw-form-right");
        Elementos.formMainDiv.classList.add("vw-form-main");
        Elementos.formContainer.append(formLeftDiv, Elementos.formMainDiv, formRightDiv);
        return Elementos.formContainer
    }

    static createCamposContainer() {
        var fieldsDiv = document.createElement('div');
        fieldsDiv.classList.add("vw-fields-container");
        fieldsDiv.append(Elementos.createMenuHamburger(), Elementos.createFormContainer());
        Elementos.mainDiv.appendChild(fieldsDiv);
    }

    static createGallery() {
        Elementos.gridDiv.classList.add('vw-gallery-container');
        const gridtitle = document.createElement('div');
        gridtitle.classList.add('vw-gallery-title-container');
        gridtitle.appendChild(Elementos.galleryTitle);
        Elementos.gallery.classList.add('vw-gallery-data');
        Elementos.pagination.classList.add('vw-gallery-pagination');
        Elementos.gridDiv.append(gridtitle, Elementos.gallery, Elementos.pagination);
        Elementos.mainDiv.appendChild(Elementos.gridDiv);
    }

    static createFicha(showMeta) {
        Elementos.fichaContainer.classList.add('vw-ficha-container');
        Elementos.fichaContainer.classList.add('vw-ficha-hidden');
        // Elementos.fichaContainer.classList.add('vw-hidden');
        Elementos.metaContainer.classList.add('vw-meta-container');
        if (showMeta == 0) {
            Elementos.metaContainer.classList.add('close');
        }
        Elementos.mediaContainer.classList.add('vw-media-container');

        /*         Elementos.buttonClose.classList.add("vw-galleryBtnClose");
                Elementos.buttonNext.classList.add("vw-galleryBtnNext");
                Elementos.buttonPrev.classList.add("vw-galleryBtnPrev");
                var btnWrapper = document.createElement('div');
                btnWrapper.classList.add("vw-wrapper");
                btnWrapper.append(Elementos.buttonPrev, Elementos.buttonNext);*/

        const mediaDiv = document.createElement('div');
        mediaDiv.classList.add('vw-media');
        mediaDiv.append(Elementos.metaContainer, Elementos.mediaContainer);

        Elementos.headerContainer.classList.add('vw-media-header');
        Elementos.fichaContainer.append(mediaDiv, Elementos.headerContainer);
        Elementos.mainDiv.appendChild(Elementos.fichaContainer);

        Elementos.btnDownload.classList.add("v-widget-metaBtnDownload");
        Elementos.btnInfo.classList.add("v-widget-metaBtnInfo");
        Elementos.buttonClose.classList.add("vw-galleryBtnClose");
        Elementos.buttonNext.classList.add("vw-galleryBtnNext");
        Elementos.buttonPrev.classList.add("vw-galleryBtnPrev")


        fetch(Atributos.urlVideoma + "/" + Atributos.directoryName + "/css/download.svg")
            .then(response => response.text())
            .then(svg => Elementos.btnDownload.insertAdjacentHTML("afterbegin", svg));

        fetch(Atributos.urlVideoma + "/" + Atributos.directoryName + "/css/info.svg")
            .then(response => response.text())
            .then(svg => Elementos.btnInfo.insertAdjacentHTML("afterbegin", svg));

        fetch(Atributos.urlVideoma + "/" + Atributos.directoryName + "/css/left-arrow.svg")
            .then(response => response.text())
            .then(svg => Elementos.buttonPrev.insertAdjacentHTML("afterbegin", svg));

        fetch(Atributos.urlVideoma + "/" + Atributos.directoryName + "/css/right-arrow.svg")
            .then(response => response.text())
            .then(svg => Elementos.buttonNext.insertAdjacentHTML("afterbegin", svg));
        fetch(Atributos.urlVideoma + "/" + Atributos.directoryName + "/css/close-circle.svg")
            .then(response => response.text())
            .then(svg => Elementos.buttonClose.insertAdjacentHTML("afterbegin", svg));



        const table = document.createElement('table');
        const tr = document.createElement('tr');  
        const tr1 = document.createElement('tr');

        Elementos.titleH1.classList.add('vw-header-title');
        const btnGroup = document.createElement('div');
        btnGroup.classList.add('vw-header-btns-right');
        btnGroup.append(Elementos.buttonPrev, Elementos.buttonClose, Elementos.buttonNext);

        const btnGroup1 = document.createElement('div');
        btnGroup1.classList.add('vw-header-btns-right');
        btnGroup1.append(Elementos.btnDownload, Elementos.btnInfo);
        Elementos.typeSpan.classList.add('vw-header-details');
        tr.append(Elementos.createTableCol(Elementos.titleH1), Elementos.createTableCol(btnGroup));
        tr1.append(Elementos.createTableCol([Elementos.typeSpan, Elementos.sizeSpan]), Elementos.createTableCol(btnGroup1));

        table.append(tr, tr1);
        Elementos.headerContainer.appendChild(table);

        // const row1 = document.createElement('div');
        // const row2 = document.createElement('div');



        // const rightButtons = document.createElement('div');
        // rightButtons.classList.add('vw-header-btns-right');
        // rightButtons.append(Elementos.buttonPrev, Elementos.buttonClose, Elementos.buttonNext);

        // const leftDetails = document.createElement('div');
        // leftDetails.classList.add('vw-header-details-left');
        // const rightDetails = document.createElement('div');
        // rightDetails.classList.add('vw-header-details-right');

        // leftDetails.append(Elementos.typeSpan, Elementos.sizeSpan);
        // rightDetails.append(Elementos.btnDownload, Elementos.btnInfo);
        // row1.classList.add('vw-header-first-row');
        // row2.classList.add('vw-header-second-row');
        // row1.append(Elementos.titleH1, rightButtons);
        // row2.append(leftDetails, rightDetails);
        // Elementos.headerContainer.append(row1, row2);
    }

    static createTableCol(value, colspan) {
        const col = document.createElement('td');
        if (colspan) {
            col.colSpan = colspan;
        }
        if (value) {
            if (Array.isArray(value)) {
                value.forEach(i => col.appendChild(i));
            } else {
                col.appendChild(value);
            }
        }
        return col;
    }
    static showHeaderFicha(title, type, size, showMeta, next, prev) {
        Elementos.titleH1.innerHTML = title;
        Elementos.typeSpan.innerHTML = type;
        Elementos.sizeSpan.innerHTML = size;

        if (showMeta) {
            Elementos.btnInfo.classList.remove('inactive');
            Elementos.btnInfo.disabled = false;
        } else {
            Elementos.btnInfo.classList.add('inactive');
            Elementos.btnInfo.disabled = true;
        }

        if (next) {
            Elementos.buttonNext.classList.remove('inactive');
            Elementos.buttonNext.disabled = false;
        } else {
            Elementos.buttonNext.classList.add("inactive");
            Elementos.buttonNext.disabled = true;
        }

        if (prev) {
            Elementos.buttonPrev.classList.remove('inactive');
            Elementos.buttonPrev.disabled = false;
        } else {
            Elementos.buttonPrev.classList.add("inactive");
            Elementos.buttonPrev.disabled = true;
        }

    }

    static activateDownload(activeDownload) {
        if (activeDownload) {
            Elementos.btnDownload.classList.remove('inactive');
            Elementos.btnDownload.disabled = false;
        } else {
            Elementos.btnDownload.classList.add("inactive");
            Elementos.btnDownload.disabled = true;
        }
    }

    static hideGear() {
        Elementos.gearLoader.classList.add("vw-hidden");
    }

    static hideOverlay() {
        Elementos.loaderOverlay.classList.add("vw-hidden");
    }

    static showOverlay() {
        Elementos.loaderOverlay.classList.remove("vw-hidden");
    }

    static showGear() {
        Elementos.gearLoader.classList.remove("vw-hidden");
    }

    static hideGearAndOverlay() {
        Elementos.hideGear();
        Elementos.hideOverlay();
    }

    static showGearAndOverlay() {
        Elementos.showGear();
        Elementos.showOverlay();
    }

    static hideFicha() {
        Elementos.fichaContainer.classList.add("vw-ficha-hidden");
        Elementos.loaderOverlay.classList.add("vw-hidden");
    }

    static showficha() {
        Elementos.fichaContainer.classList.remove("vw-ficha-hidden");
    }

    static getAllAtributes(e) {
        return e.getAttributeNames().reduce((acc, name) => {
            return { ...acc, [name]: e.getAttribute(name) };
        }, {});
    }

    static errorbar(window, text) {
        const crossCircle = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" fill="currentColor"></path> </svg>';
        let bar = document.createElement('div');
        bar.classList.add("wv-widget-bar");
        bar.innerHTML = '<span class="wv-widget-icon-error">' + crossCircle + '</span><span>' + text + '</span>';
        window.appendChild(bar);
    }

    static removeElementsByClass(className) {
        const elements = document.getElementsByClassName(className);
        while (elements.length > 0) {
            elements[0].parentNode.removeChild(elements[0]);
        }
    }
}

class Atributos {
    static style = Elementos.domElement.getAttribute("theme") ?? 'dark';
    static directoryName = "externalHook";
    static cssName = "v_widget.css";
    static waitForResource = 8000;
    static showMetaWindow = 0;
    static pag = 0;
    static recursosTotales = 0;
    static itemsPerPage = +(Elementos.domElement.getAttribute("itemsPerPage") ?? "20");
    static idioma = 0;
    static busqueda = '';
    static esquemas = 0;
    static tipoRecursos = "";
    static titulo = "";
    static publicarMetadatos = 0;
    static visibleIds = "";
    static realizaBusqueda = 0;
    static keyValue = [];

    static setAtributos(data) {
        Atributos.idioma = data.idioma;
        Atributos.busqueda = data.opciones.busquedaLibre;
        Atributos.esquemas = data.opciones.esquemaIds;
        Atributos.publicarMetadatos = data.publicarMetadatos;
        Atributos.visibleIds = data.visibleIds;
        Atributos.keyValue = data.opciones.keyValue;
        Atributos.tipoRecursos = data.opciones.tipoContenido;
        Atributos.titulo = data.opciones.titulo;
        Atributos.realizaBusqueda = data.realizaBusqueda;
    }

    static get portalId() {
        return +(Elementos.domElement.getAttribute("portalId") ?? "0");
    }

    static get urlVideoma() {
        let basePath = Elementos.domElement.getAttribute("urlVideoma");
        if (basePath == null) {
            const myScript = document.getElementById("videoma-script");
            const myScriptSrc = myScript.getAttribute("src");
            basePath = myScriptSrc.split(Atributos.directoryName).shift();
        }
        basePath += basePath.endsWith("/") ? "" : "/";
        return basePath;
    }

    static get cssFile() {
        return Elementos.domElement.getAttribute("cssFile") ??
            this.urlVideoma + Atributos.directoryName + "/css/" + Atributos.cssName;
    }

    static get iconoTipo() {
        return +(Elementos.domElement.getAttribute("iconoTipo") ?? "1");
    }

    static get vista() {
        return +(Elementos.domElement.getAttribute("vista") ?? "1");
    }

}

class HttpRequest {

    static post(basePath, page, data) {

        return HttpRequest.#makeRequest('POST', basePath + page, data);
    }

    static get(basePath, page, data) {
        return HttpRequest.#makeRequest('GET', basePath + page + '?' + data, null);
    }

    static formData(basePath, page, data) {
        return HttpRequest.#makeRequest('POST', basePath + page, data, 'formData');
    }

    static downloadRequest(data, url) {
        return HttpRequest.#makeRequest('POST', url, data, 'formData');
    }

    static #makeRequest(method, url, data, type = 'json') {
        return new Promise(function (resolve, reject) {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.addEventListener("readystatechange", () => {
                if (xhr.readyState === 4) {
                    var data = xhr.responseText;
                    try {
                        data = JSON.parse(data);
                    } catch (e) {
                        console.error('Error de comunicación');
                        reject({
                            status: xhr.status,
                            msg: 'Error de comunicación'
                        });
                    }
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(data);
                    } else {
                        reject({
                            status: xhr.status,
                            msg: data
                        });
                    }
                }
            })
            xhr.open(method, url, true);
            if (type == 'json') {
                xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                data = JSON.stringify(data);
            }
            xhr.send(data);
        });
    }

    getformData(data) {
        const formData = new FormData();
        data.forEach(i => {
            formData.append(i.key, i.value);
        });
        return formData;
    }
}

class Campos {
    debounce;

    constructor() {
        Elementos.createCamposContainer();
        Elementos.menuIconDiv.addEventListener('click', event => this.toggle());
    }

    addCampos(campos) {
        Elementos.formMainDiv.innerHTML = campos;
        var elements = document.getElementsByClassName("vw-select-input");
        Array.from(elements).forEach(el => el.addEventListener('mouseup', e => this.showFieldData(e)));

        document.addEventListener('click', event => {
            Array.from(elements).forEach(element => {
                var el = element.nextSibling;
                const isInsideElement = element.contains(event.target);
                const isClickInside = el ? el.contains(event.target) : false;
                if (!isClickInside && !isInsideElement) {
                    this.hideSelector(el);
                    event.stopPropagation();
                }
            });
        });

        var btnAceptar = document.getElementById("v-widget-form-btn");
        btnAceptar.addEventListener('click', () => this.sendForm());
    }

    checkboxChanged(ev, id) {
        var ul = document.getElementById('ul_' + id);
        var checked = ul.querySelectorAll('input[type=checkbox]:checked');
        var labels = [];
        Array.from(checked).forEach(c => {
            labels.push(c.nextSibling.textContent);
        });
        var inputField = document.getElementById('search_' + id);
        inputField.value = labels.join(', ');
    }

    createOptionLi(option, id) {
        var li = document.createElement('li');
        //li.classList.add('v-widget-display-option');
        li.setAttribute('index', option.value);
        var label = document.createElement('label');
        var check = Elementos.createCheckbox("metadata_" + id, id, option.value, false)
        check.addEventListener('change', e => this.checkboxChanged(e, id));
        label.innerHTML = option.label;
        label.prepend(check);
        li.appendChild(label);
        // li.addEventListener('click', e => this.selectedOptionField(e, id));
        return li;
    }

    fillSelectionList(selectionContainer, data, id) {
        var li = selectionContainer.getElementsByTagName("li");
        Array.from(li).forEach(l => selectionContainer.removeChild(l));
        data.forEach(i => selectionContainer.append(this.createOptionLi(i, id)));
        return selectionContainer;
    }

    getFieldData(id, ev, ulContainer) {
        var id = ev.target.id.split("_").pop();
        HttpRequest.post(Atributos.urlVideoma, Atributos.directoryName + '/fieldSearchValues.php', {
            operacion: 'buscar_valores_desplegable',
            campoid: id,
            idiomaid: Atributos.idioma,
            valor: ev.target.value,
            subconjuntoValores: ev.target.getAttribute('match')
        }).then(data => {
            var selectionContainer = this.fillSelectionList(ulContainer, data, id);
            selectionContainer.parentNode.classList.add('open');
        })
            .catch(err => {
                console.log('Videoma widget error!', err.statusText);
            });
    }

    isEmpty(id) {
        return document.getElementById(id).innerHTML.trim() == ""
    }

    showFieldData(ev) {
        if (ev.target.tagName.toLowerCase() === 'textarea') {
            return;
        }
        var id = ev.target.id.split("_").pop();
        var selectionContainer = document.getElementById('ul_' + id);
        if(!selectionContainer){
            return;
        }
        if (selectionContainer.innerHTML.trim() == "") {
            this.getFieldData(id, ev, selectionContainer)
        } else {
            var selector = selectionContainer.parentNode;
            selector.classList.add("open");
        }

    }

    searchKeyInput(ev) {

        clearTimeout(this.debounce);
        this.debounce = setTimeout(() => { this.getAutocomplete(ev); }, 350);
    }

    hideSelector(element) {
        //var selector = element.querySelector('.vw-selector');
        if (element) {
            element.classList.remove('open')
        }
    }

    toggle() {
        if (Elementos.formContainer.classList.contains('hide')) {
            Elementos.formContainer.classList.remove('hide')
        } else {
            Elementos.formContainer.classList.add('hide')
        }
    }

    sendForm() {
        var form = new FormData(document.querySelector('#vw-form'));
        var formData = Utils.serialize(form);
        Atributos.keyValue = Object.keys(formData).filter(e => formData[e] != '').map(name => Array.isArray(formData[name]) ?
            { campo: Utils.getIdFromName(name), valor: formData[name].join(',') }
            :
            { campo: Utils.getIdFromName(name), valor: formData[name] }
        );

        if (!Elementos.galleryClass) {
            Elementos.galleryClass = new GridGallery();
        }

        Elementos.galleryClass.makeSearch();
    }

}

class Ficha {
	selectedItem;			 
    elementData
    hasMeta = false;
    errorSrc = Atributos.urlVideoma + "/" + Atributos.directoryName + "/css/notfound_color.png";
    downloadSrc = Atributos.urlVideoma + "/" + Atributos.directoryName + "/descargar.php";
    downloadDetails = {
        path: '',
        size: 0,
        title: ''
    }
    constructor() {
        Elementos.createFicha(Atributos.showMetaWindow);

        Elementos.btnDownload.addEventListener('click', () => this.downloadElement());
        Elementos.btnInfo.addEventListener('click', () => this.toggleMeta());
        Elementos.buttonClose.addEventListener('click', () => this.closeFicha());
        Elementos.buttonNext.addEventListener('click', () => this.nextItem());
        Elementos.buttonPrev.addEventListener('click', () => this.prevItem());

    }

    loadVideo(localizacionhttp, titulo) {
        return new Promise((resolve, reject) => {
            var vElement = document.createElement('video');
            vElement.autoplay = false;
            vElement.muted = false;
            vElement.loop = true;
            vElement.playsinline = true;
            vElement.src = localizacionhttp;
            vElement.controls = true;
            vElement.name = titulo;
            vElement.load();

            const timeout = setTimeout(() => {
                const image = new Image();
                image.src = this.errorSrc;
                reject(image);
            }, Atributos.waitForResource);

            vElement.addEventListener('canplaythrough', () => {
                clearTimeout(timeout);
                resolve(vElement);
            });
            vElement.addEventListener('error', () => {
                const image = new Image();
                image.src = this.errorSrc;
                clearTimeout(timeout);
                reject(image);
            });
        })
    }

    loadImage(id) {
        return new Promise((resolve, reject) => {
            const image = new Image();

            image.addEventListener('load', () => {
                resolve(image);
            });
            image.addEventListener('error', () => {
                image.src = this.errorSrc;
                reject(image);
            });
            image.src = Atributos.urlVideoma + '/includes/verimagen_tamano2.php?imagenid=' + id + '&tipo_resolucion=ORIGINAL';
        });
    }

    loadDoc(id) {
        var iframe = document.createElement('iframe');
        iframe.src = encodeURI(Atributos.urlVideoma + '/includes/previewdocumento.php?&docid=' + id);

        return iframe;
    }

    showMeta(meta) {
        if (this.hasMeta) {

            var htmlMeta = '<div class="vw-fields-wrapper">';
            meta.forEach(field => {
                htmlMeta += '<div class="field"><label class="label">' + field.nombreMostrar + '</label>';
                if (field.tipoCampo == "SELECT_MULTIPLE" && Array.isArray(field.valor)) {
                    htmlMeta += '<ul>';
                    field.valor.forEach(v => {
                        htmlMeta += '<li>' + v + '</li>';
                    });
                    htmlMeta += '</ul>';
                } else {
                    htmlMeta += '<div class="control">' + field.valor + '</div>';
                }
                htmlMeta += '</div>';
            });
            htmlMeta += '</div>';
            Elementos.metaContainer.innerHTML = htmlMeta;
        } else {
            Elementos.metaContainer.classList.add('close');
        }
    }

    open(element) {
        this.elementData = element;
        Elementos.showOverlay();
        Elementos.showGear();
        Elementos.mediaContainer.innerHTML = '';
        HttpRequest.post(Atributos.urlVideoma, Atributos.directoryName + '/editItem.php', {
            id: element.id,
            tipo: element.tipo,
            esquemaIds: Atributos.esquemas,
            visibleIds: Atributos.visibleIds,
            pubMeta: Atributos.publicarMetadatos,
            videomaUrl: Atributos.urlVideoma
        })
            .then(data => {
                Elementos.hideGear();
                const metadata = data.metadata || [];
                this.hasMeta = metadata.length > 0;
                Elementos.metaContainer.innerHTML = '';
                switch (element.tipo) {
                    case 'VIDEO':
						 this.selectedItem = { 
                            type: element.tipo, 
                            id: data.detalle.videoID, 
                            title: data.detalle.titulo, 
                            url: data.detalle.localizacionhttp, 
                            duration: data.detalle.duracion, 
                            date: data.detalle.FechaInsercion 
                        };					  
						  
                        this.loadVideo(data.detalle.localizacionhttp, data.detalle.titulo)
                            .then(video => {
                                Elementos.mediaContainer.appendChild(video);
                                Elementos.activateDownload(true);
                            })
                            .catch(imgErr => {
                                Elementos.mediaContainer.appendChild(imgErr);
                                Elementos.activateDownload(false);
                            });
                        Elementos.showHeaderFicha(
                            data.detalle.titulo,
                            data.localizaciones.calidad,
                            Utils.humanFileSize(data.localizaciones.size),
                            this.hasMeta,
                            element.next > 0,
                            element.prev > 0
                        );
                        this.downloadDetails = {
                            path: data.detalle.localizacion,
                            size: data.localizaciones.localizacion,
                            title: data.detalle.titulo
                        }
                        break;
                    case 'IMAGEN':
						this.selectedItem = { 
                            type: element.tipo, 
                            id: data.detalle.imagenid, 
                            title: data.detalle.titulo, 
                            url: data.detalle.path, 
                            size: data.detalle.tamano, 
                            date: data.detalle.fechainsercion 
                        }; 					  
                        this.loadImage(element.id)
                            .then(img => {
                                Elementos.mediaContainer.appendChild(img);
                                Elementos.activateDownload(true);
                            })
                            .catch(imgErr => {
                                Elementos.mediaContainer.appendChild(imgErr);
                                Elementos.activateDownload(false);
                            });
                        Elementos.showHeaderFicha(
                            data.detalle.titulo,
                            data.detalle.tipoimagen,
                            Utils.humanFileSize(data.detalle.tamano),
                            this.hasMeta,
                            element.next > 0,
                            element.prev > 0
                        );
                        this.downloadDetails = {
                            path: data.detalle.path,
                            size: data.localizaciones.localizacion,
                            title: data.detalle.titulo
                        }
                        break;
                    case 'DOCUMENTO':
						this.selectedItem = { 
                            type: element.tipo, 
                            id: data.detalle.DocumentoID, 
                            title: data.detalle.Titulo, 
                            url: data.detalle.Path, 
                            size: data.detalle.Tamanio, 
                            date: data.detalle.FechaInsercion 
                        };					  
                        Elementos.activateDownload(false);
                        Elementos.mediaContainer.appendChild(this.loadDoc(element.id));
                        Elementos.showHeaderFicha(
                            data.detalle.Titulo,
                            data.detalle.TipoDocumento,
                            Utils.humanFileSize(data.detalle.Tamanio),
                            this.hasMeta,
                            element.next > 0,
                            element.prev > 0
                        );
                        this.downloadDetails = {
                            path: data.detalle.Path,
                            size: data.localizaciones.localizacion,
                            title: data.detalle.Titulo
                        }
                        break;
                }
				this.sendEvent("VideomaFicha");							   
                this.showMeta(metadata);
                Elementos.showficha();
                Elementos.fichaContainer.scrollIntoView();
            })
            .catch(err => {
                console.log('Videoma widget error!', err);
            })
    }

    nextItem() {
        if (this.elementData.next > 0) {
            this.closeFicha();
            var e = document.getElementById(this.elementData.next);
            const attrs = Elementos.getAllAtributes(e);
            this.open(attrs);
        }
    }

    prevItem() {
        if (this.elementData.prev > 0) {
            this.closeFicha();
            var e = document.getElementById(this.elementData.prev);
            const attrs = Elementos.getAllAtributes(e);
            this.open(attrs);
        }
    }

    downloadElement() {
		this.sendEvent("VideomaDownload");								  
        window.open(this.downloadSrc + "?path=" + this.downloadDetails.path + "&size=" + this.downloadDetails.size + "&name=" + this.downloadDetails.title, "_blank");
    }

    closeFicha() {
        var element = Elementos.mediaContainer.firstElementChild;
        if (element && element.tagName == 'VIDEO') {
            element.pause();
        }
        Elementos.hideFicha();
    }

    toggleMeta() {
        if (Elementos.metaContainer.classList.contains('close')) {
            Elementos.metaContainer.classList.remove('close');
        } else {
            Elementos.metaContainer.classList.add('close')
        }
    }
	sendEvent(name){
        var evt = new CustomEvent(name, { detail: this.selectedItem });
        window.dispatchEvent(evt);
    }
}

class GridGallery {
    ficha;
    constructor(dom, httpClient) {
        Elementos.createGallery();
    }

    addData(data) {
        Elementos.galleryTitle.innerHTML = data.titulo;
        Elementos.gallery.innerHTML = data.html;
        Elementos.pagination.innerHTML = data.htmlPagination;
        let elements = Elementos.gallery.querySelectorAll('.v-widget-item');
        if (elements) {
            Array.from(elements).forEach(el => el.addEventListener('click', () => this.showGalleryItem(el)));
        }

        let pages = document.getElementById('vw-pagination');
        if (pages) {
            Array.from(pages.getElementsByTagName('a')).forEach(el => el.addEventListener('click', () => this.gotoPage(el)));
        }
        
        Atributos.itemsPerPage = data.pagination.resultadosPagina;
        Atributos.pag = data.pagination.pag;
        Atributos.recursosTotales = data.pagination.recursosTotales;

    }

    showGalleryItem(e) {
        if (!this.ficha) {
            this.ficha = new Ficha();
        }
        const attrs = Elementos.getAllAtributes(e);
        this.ficha.open(attrs);
    }

    makeSearch() {
        Elementos.showGearAndOverlay();
        this.removeGridEvents();             
        Elementos.removeElementsByClass('wv-widget-bar');
        HttpRequest.post(Atributos.urlVideoma, Atributos.directoryName + "/formularioBuscar.php", {
            viewIcon: Atributos.iconoTipo,
            vista: Atributos.vista,
            busquedaLibre: '',
            esquemaIds: Atributos.esquemas,
            tipoContenido: Atributos.tipoRecursos,
            keyValue: Atributos.keyValue,
            pagination: {
                resultadosPagina: Atributos.itemsPerPage,
                pag: Atributos.pag,
                recursosTotales: Atributos.recursosTotales
            },
            titulo: Atributos.titulo,
            videomaUrl: Atributos.urlVideoma,
            busquedaActivada: Atributos.realizaBusqueda
        })
            .then(data => {
                Elementos.hideGearAndOverlay();                
                this.addData(data);
                // Elementos.gallery.scrollIntoView();
                Elementos.gridDiv.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
            })
            .catch(err => {
                Elementos.hideGearAndOverlay();
                Elementos.errorbar(Elementos.mainDiv, err.msg);
                console.log(err);
            });
    }

    gotoPage(el) {
        Atributos.pag = el.getAttribute('pagination');
        this.makeSearch();
    }

    removeGridEvents(){
        let elements = Elementos.gallery.querySelectorAll('.v-widget-item');
        if (elements) {
            Array.from(elements).forEach(el => el.removeEventListener('click', () => this.showGalleryItem(el)));
        }
        Elementos.gallery.innerHTML = '';

        let pages = document.getElementById('vw-pagination');
        if (pages) {
            Array.from(pages.getElementsByTagName('a')).forEach(el => el.removeEventListener('click', () => this.gotoPage(el)));
        }        
         Elementos.pagination.innerHTML = '';
    }

}

class Hook {
    campos;
    constructor() {
        Elementos.mainDiv.classList.add('wv-main-div');
        Elementos.mainDiv.classList.add(Atributos.style);
        Elementos.createLoader();
        Elementos.domElement.appendChild(Elementos.mainDiv);
        this.addStyles(Atributos.cssFile);
    }

    init() {
        HttpRequest.post(Atributos.urlVideoma, Atributos.directoryName + '/inicioWidget.php', {
            portal: Atributos.portalId,
            localUrl: window.location.href,
            videomaUrl: Atributos.urlVideoma,
            vista: Atributos.vista,
            viewIcon: Atributos.iconoTipo,
            pagination: {
                resultadosPagina: Atributos.itemsPerPage,
                pag: Atributos.pag,
                recursosTotales: Atributos.recursosTotales
            }
        })
            .then(data => {
                Elementos.hideGearAndOverlay();
                Atributos.setAtributos(data);
                if (data.ponerCampos == 1 || data.realizaBusqueda == 0) {
                    this.campos = new Campos();
                    this.campos.addCampos(data.campos);
                }

                if (data.realizaBusqueda == 1 || data.ponerCampos == 0) {
                    Elementos.galleryClass = new GridGallery();
                    Elementos.galleryClass.addData(data.search);
                }

                Atributos.busqueda = data.opciones.busquedaLibre;
                Atributos.esquemas = data.opciones.esquemaIds;
                Atributos.publicarMetadatos = data.publicarMetadatos,
                    Atributos.visibleIds = data.visibleIds,
                    Atributos.keyValue = data.opciones.keyValue;
                Atributos.tipoRecursos = data.opciones.tipoContenido;
                Atributos.titulo = data.opciones.titulo;
                Atributos.realizaBusqueda = data.realizaBusqueda;
            })
            .catch(err => {
                Elementos.hideGearAndOverlay();
                Elementos.errorbar(Elementos.mainDiv, err.msg);
                console.log(err);
            });
    }

    addStyles(cssFile) {
        const linkElement = document.createElement("link");
        linkElement.setAttribute("rel", "stylesheet");
        linkElement.setAttribute("type", "text/css");
        linkElement.setAttribute("href", cssFile);
        document.head.appendChild(linkElement);
    }
}

let widgetVideoma;
window.onload = function () {
    widgetVideoma = new Hook();
    widgetVideoma.init();
};