import {
    obtenerDatosLocalStorage,
    guardarLocalStorage,
    validarInputs,
    activarBoton,
    calcularAforo,
    redireccionUrl
} from '../../helpers/main_modulos.js';

const $areaEstablecimiento = document.getElementById('area-establecimiento');
const $areaNoTransitable = document.getElementById('area-no-transitable');
const $areaPorPersona = document.getElementById('area-por-persona');

const botonAnteriorID = '#btn-anterior';
const botonCalcularAforoID = '#btn-calcular-aforo';
const botonAceptarID = '#btn-aceptar';
const botonRechazarID = '#btn-rechazar';
const botonAceptarErrorID = '#btn-aceptar-error';

const $modalAforoBajo = document.getElementById('modal-aforo-bajo');
const $modalConfirmacionAforo = document.getElementById('modal-confirmacion-aforo');

const $ocupacionMaxima = document.getElementById('ocupacion-maxima');
const $distanciaEntrePersonas = document.getElementById('distancia-entre-personas');
const NUMERO_PAGINA_ACTUAL =  obtenerDatosLocalStorage("numeroPaginaActual");
const aforoMinimo = 4;    

let areaEstablecimiento;
let areaNoTransitable;
let areaPorPersona;
let distanciamiento;

const datosAforo = {
    cuposDisponibles: null,
    aforo: null,
    ocupacionActual: null,
}

document.addEventListener('click', (e)=> {
    if(e.target.matches(botonCalcularAforoID)){
        e.preventDefault();
        datosAforo.aforo = calcularAforo(areaEstablecimiento, areaNoTransitable, areaPorPersona);
        datosAforo.cuposDisponibles = datosAforo.aforo;
        datosAforo.ocupacionActual = 0;
        if(datosAforo.aforo < aforoMinimo) {
            $modalAforoBajo.classList.remove("js-cerrar-modal");
        }else {
            $ocupacionMaxima.textContent = datosAforo.aforo;
            $distanciaEntrePersonas.textContent = distanciamiento;
            $modalConfirmacionAforo.classList.remove("js-cerrar-modal");
        }
    }

    if(e.target.matches(botonAceptarErrorID)){
        $modalAforoBajo.classList.add("js-cerrar-modal");
    }

    if(e.target.matches(botonRechazarID)){
        $modalConfirmacionAforo.classList.add("js-cerrar-modal");
    }
    
    if(e.target.matches(botonAceptarID)){
        guardarLocalStorage("datosAforo", datosAforo);
        guardarLocalStorage("numeroPaginaActual", NUMERO_PAGINA_ACTUAL+1);
        const bodyData = {
            "_id":2021,
            "cuposDisponibles": datosAforo.cuposDisponibles,
            "ocupacionActual": datosAforo.ocupacionActual,
            "aforo": datosAforo.aforo,
        }
        const options = {
            method: 'POST',
            body: JSON.stringify(bodyData),
            headers: {
                'Content-Type': 'application/json'
            }
        }
        redireccionUrl('ventana-informativa','../'); 
        /* let url = 'https://aforoapp.herokuapp.com/actualizarAforo';
        fetch(url, options)
            .then(()=> { 
                redireccionUrl('ventana-informativa','../'); 
            }); */
    }

    if(e.target.matches(botonAnteriorID)) {
        e.preventDefault();
        guardarLocalStorage("numeroPaginaActual", NUMERO_PAGINA_ACTUAL-1);
        redireccionUrl('superficie-no-transitable');
    }
});

window.addEventListener('load', (e)=> {
    areaEstablecimiento = +obtenerDatosLocalStorage("areaEstablecimiento");
    areaNoTransitable = +obtenerDatosLocalStorage("areaNoTransitable");
    areaPorPersona = +obtenerDatosLocalStorage("areaPorPersona");
    distanciamiento = +obtenerDatosLocalStorage("distanciamiento");
    $areaEstablecimiento.textContent = areaEstablecimiento;
    $areaNoTransitable.textContent = areaNoTransitable;
    $areaPorPersona.textContent = areaPorPersona;
}); 