const boton = document.querySelector(".button-accept");
const imagen = document.querySelector(".image-menu-hamburguesa");

imagen.addEventListener("click", openSlideMenu);


/*
  ***** Script que destroza el elemento al pinchar click y quita 0.1 de opacidad para simular
  un fade out
boton.addEventListener("click", fadeOutEffect);
 Function that every 0.1 second removes 0.1 opacity and when the opacity is 0 destroys the element from the DOM
When the opacity is equal to 0 destroys the element forever.
function fadeOutEffect() {
    const fadeTarget = document.querySelector(".z-index30");
    const fadeTarget1 = document.querySelector(".z-index20");
    const fadeEffect = setInterval(function() {
        if (!fadeTarget.style.opacity && !fadeTarget1.opacity) {
            fadeTarget.style.opacity = 1;
            fadeTarget1.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0 && fadeTarget1.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
            fadeTarget1.style.opacity -= 0.1;
            if (fadeTarget.style.opacity == 0) {
                removeElement();
            }
        } else {
            clearInterval(fadeEffect);
        }
    }, 50);
}
*/
/* Script que destroza el elemento al pinchar aceptar el z-index 20 y el z-index 30,
actualmente esta comentado, se utilizará alert.js 
function removeElement() {
    // Removes an element from the DOM 
    const elemento = document.querySelector(".z-index30");
    const elemento1 = document.querySelector(".z-index20");
    elemento.parentNode.removeChild(elemento);
    elemento1.parentNode.removeChild(elemento1);
}
*/
//  Function that opens the slide menu and adds the class for the opacity
function openSlideMenu() {
    document.querySelector(".grid-template").style.left = "0px";
    let el = document.querySelector("#elemento-opacidad");
    el.classList.add("opacidad");
    lupa.style.display = "none"
}
//function to close the slide menu and remove the class of the opening menu that gives the opacity
function closeSlideMenu() {
    document.querySelector(".grid-template").style.left = "-360px";
    let el = document.querySelector("#elemento-opacidad");
    el.classList.remove("opacidad");
    lupa.style.display = "block";

}

//SIN COCHES//
var ncoches = [
    { matricula: "4565 XYK", modelo: "Tesla Model S" },
    { matricula: "1234 YYY", modelo: "Ford Mondeo" },
    { matricula: "KUYX 123", modelo: "Mazda Y" },
    { matricula: "KKXXBB", modelo: "Ford Fiesta" }
]
var coches = [
    ]


opcionCoches = document.getElementById("opcionCoches");

if (coches.length>0){
    opcionCoches.className="item1-1 activo box white text-center-for-grid";
    opcionCoches.innerHTML="<div class='padre-de-seleccionar-coche activoPadre '><div class='icono-coche'><img class='icon-of-lateral-menu' alt='foto del coche' src='./assets/images/iconos/outline-drive_eta-24px.svg'></img></div><div class='icono-abajo'><img id='imgClickAndChange' class='gt posicionar-foto' src='./assets/images/iconos/abajo.svg'></div><div class='div-show-car3'><hr><a href='vehiculo.html'>Añadir Coche</a></div></div>";
}
else{
    opcionCoches.className="item1-1_sinCoches white text-center-for-grid";
    opcionCoches.innerHTML="<img class='icon-of-lateral-menu' alt='Station icon' src='./assets/images/iconos/outline-drive_eta-24px.svg'><a href='./vehiculo.html' class='principal-message'>Añadir Coche</a><img alt='more info' class='gt' src='assets/images/iconos/dcha.svg'>";
}

//SIN COCHES//




// function to toggle the class on show hide select car option in the main menu
let item1 = document.querySelector(".item1-1");
let padre = document.querySelector(".padre-de-seleccionar-coche");
item1.onclick = function() {
    if (item1.className == 'activo') {
        item1.classList.toggle("overflow-togleable");
        padre.classList.toggle("box-shadow-togleable");
        changeImage();
    } else {
        item1.classList.toggle("overflow-togleable");
        padre.classList.toggle("box-shadow-togleable");
        changeImage();
    }
}

function changeImage() {
    if (item1.className == "item1-1 activo box white text-center-for-grid overflow-togleable") {
        document.getElementById("imgClickAndChange").src = "./assets/images/iconos/arriba.svg";
    } else {
        document.getElementById("imgClickAndChange").src = "./assets/images/iconos/abajo.svg";
    }
}

function crearElementoHtmlCoche({ modelo, matricula }) {
    let template = document.createElement("div");
    template.classList.add("div-show-car");

    let marcaCoche = document.createElement("div");
    marcaCoche.classList.add("marca-coche");

    let spanModelo = document.createElement("span");
    spanModelo.classList.add("posicionar-coche");
    spanModelo.innerText = modelo;


    let spanMatricula = document.createElement("span");
    spanMatricula.classList.add("posicionar-subtexto");
    spanMatricula.innerText = matricula;

    marcaCoche.appendChild(spanModelo);
    marcaCoche.appendChild(spanMatricula);
    template.appendChild(marcaCoche);

    return template;
}



const car = document.querySelectorAll(".div-show-car");
const divShowCar3 = document.querySelector(".div-show-car3");
for (i = 0; i < coches.length; i++) {
    document
        .querySelector('.padre-de-seleccionar-coche')
        .insertBefore(crearElementoHtmlCoche(coches[i]), divShowCar3);
}

let lupa = document.querySelector(".div-magnifying-glass");
let par = document.querySelector(".gran-grid");
lupa.addEventListener("click", function() {
    par.classList.toggle("x");
});
let gridMenuOculto = document.querySelector(".menu-oculto-estacion-carga");
let imagenIcono = document.querySelector(".imagen-icono");
imagenIcono.addEventListener("click", showTheMenu);

function showTheMenu() {
    gridMenuOculto.classList.toggle("menu-no-oculto");
    gridMenuOculto.classList.toggle("menu-oculto-estacion-carga");
}
let x = document.querySelectorAll(".item-conector");
for (let i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {
        this.classList.toggle("color-del-borde");
    })
}
let menuOculto = document.querySelector(".elMenuOcultoDeSeleccionarEstacion");
let mapa = document.querySelector(".x-mapa");
window.addEventListener("touchstart", function(event) {
    if (event.touches[0].target == mapa) {
        menuOculto.classList.remove("menu-no-oculto");
        par.classList.remove("x");
    }
});

const showCarList = document.querySelectorAll('.div-show-car');
showCarList.forEach(element => {
    element.addEventListener('click', function() {
        document.querySelector('.grid-row-anadido').className="div-show-car";
        element.classList.toggle("grid-row-anadido")
    });
});
for (i = 0; i < showCarList.length; i++) {
    showCarList[i].id = "element" + i;
}
showCarList[0].classList.add("grid-row-anadido");



document
    .querySelector(".grid-menor-del-gran-grid")
    .addEventListener("click", function() {
        window.location.href = "./filtros.html";
    });



document
    .querySelector(".grid-menor-del-gran-grid-2")
    .addEventListener("click", function() {
        window.location.href = "./busqueda.html";
    })
document
    .querySelector(".imagen-que-lleva-a-pagina-estaciones")
    .addEventListener("click", function() {

    })