document.getElementById('btnConsultaCep').addEventListener('click', async () => {
  const cep = document.getElementById('cep').value;
  const numero = document.getElementById('numero').value;
  const endereco = document.getElementById('consultaResultAddress');
  const resultados = document.getElementById('consultaResultViabilidade');
  const dedicado = document.getElementById('link-dedicado');
  const naoDedicado = document.getElementById('link-nao-dedicado');
  endereco.innerText = 'Consultando...';
  try {
    const resp = await fetch(`/viabilidade?cep=${encodeURIComponent(cep)}&numero=${encodeURIComponent(numero)}`);
    const data = await resp.json();
    if (data && data.logradouro !== undefined) {
      // colocar o card-results__container (resultados) com display block
      endereco.innerHTML = `<strong>Endereço:</strong> ${data.logradouro} ${data.numero} ${data.bairro} ${data.cidade} ${data.estado} ${data.cep} .`;
      resultados.style.display = 'block';

      if (data.dedicado) {
        dedicado.innerText = "Viável";
        dedicado.classList.remove('inviavel');
        dedicado.classList.add('viavel');
      } else {
        dedicado.innerText = "Não viável";
        dedicado.classList.remove('viavel');
        dedicado.classList.add('inviavel');
      }

      if (data.naoDedicado) {
        naoDedicado.innerText = "Viável";
        naoDedicado.classList.remove('inviavel');
        naoDedicado.classList.add('viavel');
      } else {
        naoDedicado.innerText = "Não viável";
        naoDedicado.classList.remove('viavel');
        naoDedicado.classList.add('inviavel');
      }

      // // insere nos spans link-dedicado e link-nao-dedicado os textos de viabilidade e se for viavel adicionar classe "viavel" e se for inviavel adicionar classe "inviavel"
      // dedicado.innerText = data.dedicado;
      // naoDedicado.innerText = data.naoDedicado;
      // if (data.dedicado === 'Viável') {
      //   // precisa remover a classe inviavel se existir
      //   dedicado.classList.remove('inviavel');
      //   dedicado.classList.add('viavel');
      // } else if (data.dedicado === 'Não viável') {
      //   // precisa remover a classe viavel se existir
      //   dedicado.classList.remove('viavel');
      //   dedicado.classList.add('inviavel');
      // } 
      
      // if (data.naoDedicado === 'Viável') {
      //   // precisa remover a classe inviavel se existir
      //   naoDedicado.classList.remove('inviavel');
      //   naoDedicado.classList.add('viavel');
      // } else if (data.naoDedicado === 'Não viável') {
      //   // precisa remover a classe viavel se existir
      //   naoDedicado.classList.remove('viavel');
      //   naoDedicado.classList.add('inviavel');
      // }
    } else if (data.error) {
      endereco.innerText = 'Erro: ' + data.error;
    } else {
      endereco.innerText = 'Erro na consulta';
    }
  } catch (e) {
    endereco.innerText = 'Erro na consulta';
  }
});