/***************************************
 * I M P O R T A N T E
 * 
 * Modificar algo desde este archivo puede hacer que aspectos del template dejen de funcionar 
 * *************************************/

//resize de slider 
$(window).on('resize', function() {
    var x = $('[data-bs="slider"]:not(.owl-carousel)');
    x.each(function(){
        if(!$(this).hasClass('slick-initialized')){
            return $(this).slick($(this).data("info"));
        }  
    })
})



//menu tipo amazon 
var navbar;
var navbarToggler   = document.querySelectorAll(".navbar-toggler")

for(i = 0; i<navbarToggler.length; i++){
    navbarToggler[i].addEventListener("click", function(e){
        var menuId = this.dataset.target
            navbar = document.querySelector(menuId)
        desktopNavbar(navbar)
        hideScroll(true)
        
        //close navbar 
        closeNavbar(navbar)
    })
}

var scrollbarWidth = scrollbarWidth() + "px";
function scrollbarWidth() {
    document.body.style.overflow = 'hidden';
    var width = document.body.clientWidth;
    document.body.style.overflow = 'scroll';
    width -= document.body.clientWidth;
    if(!width) width = document.body.offsetWidth-document.body.clientWidth;
    document.body.style.overflow = '';
    return width;
}
console.log(scrollbarWidth)
function hideScroll(boolean){
    
    if(boolean){
        //if true
        document.body.style.paddingRight = scrollbarWidth;
        document.body.style.overflow = "hidden";
    }else{
        document.body.style = "";
    }
    
}



function closeNavbar(navbar){
    navbar.addEventListener("click", function(e){
        console.log("close")
        if(this == e.target){
            //necesita transformarse en jquery para utilizar las clases de bootstrap 
            $(this).collapse("hide")
            hideScroll(false)
        }
        
    })
}

function desktopNavbar(navbar){
    console.log("click")
    var dropLv1         = navbar.querySelectorAll(".nav-item.dropdown a");
    var menu            = navbar.querySelector(".navbar__menu-desktop");
    var close           = navbar.querySelector(".navbar__close");
    
    
    var anchoPantalla = `${document.body.clientWidth}px`
    
    
    function dropdownMenu(element,menu){
        var el = element.closest(".nav-item.dropdown");
        var name = el.dataset.info;
        var child = el.querySelector(".menu__group");
        
        var lv3 = child.contains(el.querySelector(".bs-menu__lv3"));
        console.log(el.dataset)
        menu.innerHTML = `<div class="navbar__menu-desktop__menu-title">${name}  ${el.dataset.menuJs.length > 0 ? '<a class="navbar__menu-desktop__menu-title__link" href="'+el.dataset.menuJs+'"> Ver todo</a>': ''}</div>
        <div class="scroll-menu"><div class="navbar__menu-desktop__group ${lv3?"navbar__menu-desktop__lv2-titles":"" }">${child.innerHTML.replace('href="#"','')}</div></div>`;
        
    }

    for(i = 0; i<dropLv1.length; i++){
        dropLv1[i].addEventListener("click", function(){dropdownMenu(this,menu)})
        dropLv1[i].addEventListener("mouseover", function(){dropdownMenu(this,menu)})
    }
    close.addEventListener("click", function(){
        menu.innerHTML = "";
        
        hideScroll(false)
    })
}