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

const $medidaAncho = document.getElementById('ancho');
const $medidaLargo = document.getElementById('largo');

const botonAnteriorID = '#btn-anterior';
const botonSiguienteID = '#btn-siguiente';
const $botonSiguiente = document.getElementById('btn-siguiente');
const botonAceptarErrorID = '#btn-aceptar-error'; 

const $modalErrorCongruencia = document.getElementById('modal-error-congruencia');

const campoActual = 'medidasSuperficieNoTransitable';
const areaEstablecimiento =  obtenerDatosLocalStorage("areaEstablecimiento");

let medidasSuperficieNoTransitable = {
    ancho: null,
    largo: null
}

let medidaAnchoValida;
let medidaLargoValida;

document.addEventListener('change', (e)=> {
    if(e.target.matches('#ancho')){
        medidaAnchoValida = $medidaAncho.validity.valid;
        let esValido = validarInputs(medidaAnchoValida, medidaLargoValida);
        activarBoton(esValido,$botonSiguiente);
    }

    if(e.target.matches('#largo')){
        medidaLargoValida = $medidaLargo.validity.valid;
        let esValido = validarInputs(medidaAnchoValida, medidaLargoValida);
        activarBoton(esValido,$botonSiguiente);
    }
});

document.addEventListener('keyup', (e)=> {
    if(e.target.matches('#ancho')){
        medidaAnchoValida = $medidaAncho.validity.valid;
        let esValido = validarInputs(medidaAnchoValida, medidaLargoValida);
        activarBoton(esValido,$botonSiguiente);
    }

    if(e.target.matches('#largo')){
        medidaLargoValida = $medidaLargo.validity.valid;
        let esValido = validarInputs(medidaAnchoValida, medidaLargoValida);
        activarBoton(esValido,$botonSiguiente);
    }
});

document.addEventListener('click', (e)=> {
    if(e.target.matches(botonSiguienteID)){
        e.preventDefault();
        medidasSuperficieNoTransitable = {
            ancho: +$medidaAncho.value, 
            largo: +$medidaLargo.value
        };
        let areaNoTransitable = medidasSuperficieNoTransitable.ancho * medidasSuperficieNoTransitable.largo;
        if(areaEstablecimiento < areaNoTransitable) {
            $modalErrorCongruencia.classList.remove("js-cerrar-modal");
        }else {
            guardarLocalStorage(campoActual, medidasSuperficieNoTransitable);
            guardarLocalStorage('areaNoTransitable', areaNoTransitable);
            redireccionUrl('resumen');
        }
        
    }
    
    if(e.target.matches(botonAceptarErrorID)){
        $modalErrorCongruencia.classList.add("js-cerrar-modal");
    }

    if(e.target.matches(botonAnteriorID)) {
        e.preventDefault();
        redireccionUrl('superficie-establecimiento');
    }
});

window.addEventListener('load', (e)=> {
  let medidasGuardadas = obtenerDatosLocalStorage(campoActual);
  if (medidasGuardadas) {
    $medidaAncho.value = medidasGuardadas.ancho;
    $medidaLargo.value = medidasGuardadas.largo;
  }

  medidaAnchoValida = $medidaAncho.validity.valid;
  medidaLargoValida = $medidaLargo.validity.valid;
  let esValido = validarInputs(medidaAnchoValida, medidaLargoValida);
  activarBoton(esValido, $botonSiguiente);
}); 