'use strict'
import { claseCSS } from "./estilos-css.js";
import { elementoDOM } from "./variables_DOM.js";


let datosCargados  = false;
const urlServicioWeb = "https://aforoapp.herokuapp.com/obtenerAforo";

const datosActuales = {
    cuposDisponibles: null,
    capacidadMaxima: null,
    rangos: null
}

let claseColorActual = null;

const rangos = {
    maximaAfluencia: null,
    altaAfluencia:  { max: null, min:null },
    mediaAfluencia: { max: null, min:null },
    bajaAfluencia:  { max: null, min: 0},
}

const colores = ["verde", "amarillo", "naranja", "rojo"];

function establecerRangos(capacidadMaxima) {
    const personasPorRango = Math.floor(capacidadMaxima/3);
    rangos.maximaAfluencia = capacidadMaxima;
    rangos.altaAfluencia = {
        max: capacidadMaxima - 1,
        min: capacidadMaxima - personasPorRango,
    }
    rangos.mediaAfluencia = {
        max: (capacidadMaxima - personasPorRango) - 1,
        min: capacidadMaxima - (personasPorRango * 2)
    }
    rangos.bajaAfluencia = {
        max: capacidadMaxima - (personasPorRango * 2) - 1,
        min: 0
    }
}

function aplicarClase(nombreElemento, nombreClase, color) {
    nombreElemento.classList.remove(nombreClase[claseColorActual]);
    nombreElemento.classList.add(nombreClase[color]);
}

function compararColorDeEstilo(color) {
    if(claseColorActual !== color){
        aplicarClase(elementoDOM.$contenedorCards, claseCSS.shadow, color);
        aplicarClase(elementoDOM.$aviso, claseCSS.borderColor, color);
        aplicarClase(elementoDOM.$cuposDisponibles, claseCSS.color, color);
        claseColorActual = color;
    }
}

function actualizarValorAfluencia(ocupacionActual) {
    if(ocupacionActual >= rangos.bajaAfluencia.min && ocupacionActual <= rangos.bajaAfluencia.max){
        elementoDOM.$afluenciaActual.textContent = "Baja Afluencia";
        return 0;
    }
    else if(ocupacionActual >= rangos.mediaAfluencia.min && ocupacionActual <= rangos.mediaAfluencia.max){
        elementoDOM.$afluenciaActual.textContent = "Media Afluencia";
        return 1;
    }
    else if(ocupacionActual >= rangos.altaAfluencia.min && ocupacionActual <= rangos.altaAfluencia.max){
        elementoDOM.$afluenciaActual.textContent = "Alta Afluencia";
        return 2;
    }
    else if(ocupacionActual >= rangos.maximaAfluencia){
        elementoDOM.$afluenciaActual.textContent = "Máxima Afluencia";
        return 3;
    }
}

document.addEventListener('keypress', (e)=> {
    if(e.target.matches('#btn-ir-pagina-principal')){
        if(e.code === 'Enter' ){
            location.href ="../index.html";
        }
    }
});

document.addEventListener('click', (e)=> {
    if(e.target.matches('#btn-ir-pagina-principal')){            
        location.href ="./index.html";
    }
});

async function obtenerDatosBD() {
    let respuesta = await fetch(urlServicioWeb);
    let datosObtenidos =  await respuesta.json();
    if(respuesta.status !== 200 ) {
        throw new Error(`HTTP error! status: ${respuesta.status}`);
    }
    return datosObtenidos;
}

async function obtenerValoresActualizados() {
    const datosObtenidos = await obtenerDatosBD();
    
    if(datosActuales.capacidadMaxima !== datosObtenidos.aforo){
        datosActuales.capacidadMaxima = datosObtenidos.aforo;
        elementoDOM.$capacidadMaxima.textContent = datosActuales.capacidadMaxima;
        establecerRangos(datosObtenidos.aforo);
    }

    if(datosActuales.cuposDisponibles !== datosObtenidos.cuposDisponibles){
        datosActuales.cuposDisponibles = datosObtenidos.cuposDisponibles;
        elementoDOM.$cuposDisponibles.textContent = datosActuales.cuposDisponibles;
        let ocuAct = datosObtenidos.aforo - datosObtenidos.cuposDisponibles
        elementoDOM.$ocupacionActual.textContent = ocuAct;
        let numeroColor = actualizarValorAfluencia(ocuAct);
        compararColorDeEstilo(colores[numeroColor]);
        datosCargados = true;
    }
    if(datosCargados) {
        elementoDOM.$body.classList.remove('body--overflow-hidden');
        elementoDOM.$modalCarga.classList.add('m-modal-carga--oculto');
    }
}


window.addEventListener('load', ()=> {

    establecerRangos(obtenerDatosBD());
    
    const consumoBD = setInterval(()=> {
        obtenerValoresActualizados()
            .catch(err => {
                clearInterval(consumoBD);
            });
    },2000);
});