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 campoActual = "medidasEstablecimiento";

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();
    let medidasEstablecimiento = {
      ancho: +$medidaAncho.value,
      largo: +$medidaLargo.value,
    };
    let areaEstablecimiento =
      medidasEstablecimiento.ancho * medidasEstablecimiento.largo;
    guardarLocalStorage(campoActual, medidasEstablecimiento);
    guardarLocalStorage("areaEstablecimiento", areaEstablecimiento);
    redireccionUrl("superficie-no-transitable");
  }

  if (e.target.matches(botonAnteriorID)) {
    e.preventDefault();
    redireccionUrl("distanciamiento");
  }
});

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);
});
