$(document).ready(function () {
    loadMenu();
    $('#menu-container').on('show.bs.collapse', function () {
        $('#flexBanner').addClass('show');
    });
    $('#menu-container').on('hidden.bs.collapse', function () {
        $('#flexBanner').removeClass('show');
    });
    $("#menu-container #flexBanner").click(function () {
        $("#menu-container").removeClass("show");
    });
    $("#contenedor #close-menu").click(function () {
        $("#btnMenu").click();
    });
    showHideMenu();
    $("#contenedor-controles").hide();
});

function loadMenu() {
    var datos = "json/menu-" + proyecto + ".json";
    let i = 0;
    $.getJSON(datos, {
        format: "json"
    }).done(function (data) {
        //Se crea la estructura del menu
        let html = '';
        let idSubMenu = "";
        let url = "";
        let collapse = "";
        let cssProjectTitle = "";
        let cssSubMenu = "";
        loadProyecto(data.urlDefault,false);
        for (i = 0; i < data.proyectos.length; i++) {
            let defaultMenu = (i == 0) ? 'card-default' : '';
            if (data.proyectos[i].active) {
                collapse = "collapse show";
                cssProjectTitle = "project-active";
            } else {
                collapse = "collapse show"
                cssProjectTitle = "project-no-active";
                console.log("Entro a false" + data.proyectos[i].active);
            }
            let dataPreview = data.proyectos[i].dataPreview;
            html += '<div class="card' + defaultMenu + ' col-12">' +
                '<div class="card-heading" role="tab" id="heading' + i + '" dataPreviewImage="' + dataPreview.imagen + '" dataPreviewTitulo="' + dataPreview.titulo + '" dataPreviewDescripcion="' + dataPreview.descripcion + '" dataPreviewTextoMenu="' + dataPreview.textoMenu + '">' +
                '<h4 class="card-title ">' +
                '<a role="button" data-toggle="collapse" id="project' + i + '" class="project-name-menu ' + cssProjectTitle + '" data-parent="#accordionMenu" href="#collapse' + i + '" aria-expanded="true" aria-controls="collapse' + i + '">' +
                '</a>' +
                '</h4>' +
                '</div>' +
                '<div id="collapse' + i + '" class="collapse-header col-12 card-collapse ' + collapse + ' in" role="tabcard" aria-labelledby="heading' + i + '">' +
                '<div class="card-body">' +
                '<ul class="nav">';
            for (j = 0; j < data.proyectos[i].subMenus.length; j++) {
                if (data.proyectos[i].subMenus[j].active) {
                    cssSubMenu = "sub-menu-active";
                    loadProyecto(data.proyectos[i].subMenus[j].url,false);
                } else {
                    cssSubMenu = "";
                }
                idSubMenu = 'sub-menu' + (i + '-' + j);
                url = "'" + data.proyectos[i].subMenus[j].url + "'";
                html += '<a href="#" id="' + idSubMenu + '" class="name-sub-menu ' + cssSubMenu + '" onclick="loadProyecto(' + url + ',' + data.proyectos[i].subMenus[j].externo + ');showControls(' + data.proyectos[i].subMenus[j].controls + ');setActiveMenu(' + i + ',' + j + ',' + data.proyectos[i].subMenus[j].externo + ');hideMenu();return false;"><li><span class="texto-sub-menu">' + data.proyectos[i].subMenus[j].descripcion + '</span></li></a>'
            }
            html += '</ul>' +
                '</div>' +
                '</div>' +
                '</div>';

        }
        //se habilita la funcionalidad del menu
        $('#accordionMenu').html(html);

        $('#accordionMenu .collapse').on('show.bs.collapse', function () {
            $('#accordionMenu .collapse').removeClass('show');
            $(".card-heading svg").removeClass("bi-chevron-down").addClass("bi-chevron-right").html('<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>');
            let idElement = "#" + $(this).attr("aria-labelledby");
            $(idElement).find(".bi").removeClass("bi-chevron-right").addClass("bi-chevron-down").html('<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>');


        });
        $('#accordionMenu .collapse').on('hidden.bs.collapse', function () {
            $('#accordionMenu .collapse').removeClass('show');
            let idElement = "#" + $(this).attr("aria-labelledby");
            $(idElement).find(".bi").removeClass("bi-chevron-down").addClass("bi-chevron-right").html('<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>');
        });
        $("#accordionMenu .card-heading").mouseover(function () {
            $("#tituloPreview").text($(this).attr("dataPreviewTitulo"));
            $("#descripcionPreview").text($(this).attr("dataPreviewDescripcion"));
            $("#textoMenu").text($(this).attr("dataPreviewTextoMenu"));
            $("#previewImg").attr("src", $(this).attr("dataPreviewImage"));
        });
    });
}

function loadProyecto(url, externo) {
    if (externo) {
        window.open(url, '_blank');
    } else {
        $("#project-container").prop('data', url);
    }
}

function showControls(controls){

    $("#contenedor-controles").hide();
    $("#controles").hide();

    if(controls){
        $("#contenedor-controles").show();
        setTimeout(()=>{
            $("#contenedor-controles").show();
            $("#controles").show();
        },5000);
        
    }else{
        $("#contenedor-controles").hide();
        $("#controles").hide();
    }

}
function hideMenu() {
    $("#btnMenu").click();
}

function setActiveMenu(idProject, idSubMenu, externo) {
    if (externo == false) {
        $(".project-name-menu").removeClass("project-active");
        $(".name-sub-menu").removeClass("sub-menu-active");
        $("#project" + idProject).addClass("project-active");
        $("#project" + idProject).removeClass("project-no-active");
        $("#sub-menu" + (idProject + "-" + idSubMenu)).addClass("sub-menu-active");
    }
}

function showHideMenu(btn) {
    $("#btnMenu").click(function () {
        if ($("#menu-container").hasClass("show")) {
            $("#menu-container").removeClass("show");
            $("#menu-container").removeClass("forward");
            $("#menu-container").addClass("back");
            $("#menu-container").animate({ left: "15px" });
            $("#btnMenu").animate({ left: "236px" });
            $("#btnMenu").css({ "background-image": "url('images/icon_back.png')" });
            $("#contenedor #close-menu").css({ "visibility": "visible" });
        } else {
            $("#menu-container").addClass("show");
            $("#menu-container").removeClass("back");
            $("#menu-container").addClass("forward");
            $("#menu-container").animate({ left: "-220px" });
            $("#btnMenu").animate({ left: "0px" });
            $("#btnMenu").css({ "background-image": "url('images/icon_forward.png')" });
            $("#contenedor #close-menu").css({ "visibility": "hidden" });
        }

    });
    $("#btnMenu").hover(function () {
        if ($("#menu-container").hasClass("back")) {
            $("#btnMenu").css({ "background-image": "url('images/icon_back_hover.png')" });
        }
        if ($("#menu-container").hasClass("forward")) {
            $("#btnMenu").css({ "background-image": "url('images/icon_forward_hover.png')" });
        }

    });
    $("#btnMenu").mouseleave(function () {
        if ($("#menu-container").hasClass("back")) {
            $("#btnMenu").css({ "background-image": "url('images/icon_back.png')" });
        }
        if ($("#menu-container").hasClass("forward")) {
            $("#btnMenu").css({ "background-image": "url('images/icon_forward.png')" });
        }
    });
}