var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click",function(event) {
  event.preventDefault();

  var form = document.querySelector("#form-adiciona");
//Extraindo informações do paciente do form
  var paciente = obtemPacienteDoFormulario(form);

//Cria a tr e a td do paciente
  var pacienteTr = montaTr(paciente);

  var erros = validaPaciente(paciente);

  if(erros.length >0){
      exibeMensagensDeErro(erros); //pode haver mais de um erro - concatenar isto no form para criar uma ul e várias li para cada mensagem de erro
      return;
  }

//Adicionando o paciente na tabela
  var tabela = document.querySelector("#tabela-pacientes");

  tabela.appendChild(pacienteTr);

  form.reset();
  var mensagensErro = document.querySelector("#tabela-pacientes");
  mensagensErro.innerHTML = "";

});

function exibeMensagensDeErro(erros){
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "" //zera as mensagens de erro anteriores ao corrigir o formulário

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    })
}

function obtemPacienteDoFormulario(form) {
//aqui estou criando um objeto com características comuns
  var paciente = {
    nome: form.nome.value,
    peso: form.peso.value,
    altura: form.altura.value,
    gordura: form.gordura.value,
    imc: calculaImc(form.peso.value, form.altura.value)
  }
  return paciente;
}

function montaTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    //colocando as td's dentro da tr
    pacienteTr.appendChild(montaTd(paciente.nome,"info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}

function validaPaciente(paciente){

    var erros = [];

    if(paciente.nome.length == 0){
        erros.push("O campo nome não pode ser em branco");
    }
    if(!validaPeso(paciente.peso)){
        erros.push("Peso é inválido");
    }
    if(!validaAltura(paciente.altura)){
        erros.push("Altura é inválida");
    }

    if(paciente.gordura.length == 0){
        erros.push("O campo gordura não pode ser em branco");
    }

    if(paciente.peso.length == 0){
        erros.push("O campo peso não pode ser em branco");
    }

    if(paciente.altura.length == 0){
        erros.push("O campo altura não pode ser em branco");
    }
    //quando o comando é simples como acima pode removar as chaves e deixar em uma linha que o js entende

    return erros;
}