//boton de meno flechas


const intervalo_movimiento = 150;

/* MENU SUPERIOR 
ID: menu 
id: flecha-izq
id: flecha-dch */

const flechaIzq = document.querySelector('#flecha-izq');
flechaIzq.addEventListener('click', () => ClickScroll('izq','menu',intervalo_movimiento) );

const flechaDch = document.querySelector('#flecha-dch');
flechaDch.addEventListener('click', () => ClickScroll('dch','menu',intervalo_movimiento) );

/* MENU FOOTER 
ID: menu-2 
id: flecha-izq-2
id: flecha-dch-2 */

const flechaIzq2 = document.querySelector('#flecha-izq-2');
flechaIzq2.addEventListener('click', () => ClickScroll('izq','menu-2',intervalo_movimiento) );

const flechaDch2 = document.querySelector('#flecha-dch-2');
flechaDch2.addEventListener('click', () => ClickScroll('dch','menu-2',intervalo_movimiento) );


/*
const menu = document.querySelector('#menu');
menu.addEventListener("wheel", (event) => {});

onwheel = (event) => {
    console.log("Ruletas si");
    console.log(event.deltaY);

    if (event.deltaY > 0) {
        ClickScroll('izq',intervalo_movimiento)
    }else{
        ClickScroll('dch',intervalo_movimiento)
    }
};
*/

function ClickScroll(valor,menu_q,intervalo = 100){    
    const menu = document.querySelector('#'+menu_q);
    let pos1 = menu.scrollLeft+intervalo;
    let pos2 = menu.scrollLeft-intervalo;    
    switch (valor) {
        case 'izq':
            //console.log("Click flecha izquierda");                        
            menu.scrollTo({ top: 0, left: pos2, behavior: "smooth" });
        break;
        case 'dch':
            //console.log("Click flecha derecha");
            menu.scrollTo({ top: 0, left: pos1, behavior: "smooth" });
        break;
    }    
}