var updateEmail = false;

$("#telefone").mask("(99) 99999-9999");
$("#cpf").mask("999.999.999-99");
// const arrayCampos = [
//   "#email",
//   "#matricula",
//   "#nome",
//   "#cpf",
//   "#telefone",
//   ".documentos",
//   "#selecione-servico",
// ];

const arrayCampos = [
  "#email",
  "#matricula",
  "#nome",
  "#cpf",
  "#telefone",
  ".documentos",
];

const arrayCamposObrigatorios = [
  "#email",
  "#matricula",
  "#nome",
  "#cpf",
  "#telefone",
];

var horarioAgendamento;
var horarioCalendarioSelecionado;
var diaCalendario;
var mesCalendario;
var anoCalendario;
var idUsuario;

var cadastro = false;
var atualizaDados = false;
// var usuarioSemEmail = false;
var usuarioSemEmail;
var dadosPessoa;
var botaoAtualizar;

$("#email, #nome, #cpf, #telefone, #matricula").on("change", function (e) {
  var email = $("#email").val();
  var nome = $("#nome").val();
  var cpf = $("#cpf").val();
  var telefone = $("#telefone").val();
  var matricula = $("#matricula").val();

  if (
    email != "" &&
    nome != "" &&
    cpf != "" &&
    telefone != "" &&
    matricula != "" &&
    updateEmail == false &&
    usuarioSemEmail == false
  ) {
    $("#btn-continuar").show();
  } else {
    $("#btn-continuar").hide();
  }
});

document.querySelector("#email").addEventListener("change", async function () {  
  const email = validateAndClearEmail("email");

  if (email == null) {
    return;
  }

  if (email == "") {
    mostrarAlerta("Digite um email!");
    return;
  }

  if ($("#email").val() == "" || botaoAtualizar) {
    const response = await fetch("/api/v1/get-usuario", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email }),
    });
    if (response.ok) {
      const data = await response.json();
      if (Object.keys(data).length > 0) {
        $("#email").val("");
        mostrarAlerta(
          "E-mail já cadastrado para outro usuário, favor insira um e-mail diferente."
        );
        $("#btn-continuar").hide();
      } else {
        if(usuarioSemEmail){
          $("#btn-continuar").hide();
        }else {
          $("#btn-continuar").show();
        }
      }
    }
  }

  if(document.getElementById("emailConf").value != ""){
    $("#btn-continuar").show();
  }
});

const btnCorrigeDados = document.querySelector("#btn-corrigeDados");
btnCorrigeDados.addEventListener("click", async (event) => {
  updateEmail = true;
  if (!usuarioSemEmail) {
    $("#email").val("");
  }

  atualizaDados = true;
  botaoAtualizar = true;
  $("#btn-corrigeDados").hide();
  $("#btn-continuar").hide();
  $("#emailConfirm").removeClass("hide");
  $("#email").removeAttr("readonly");
  $("#email").css("background-color", "#fff");
});

const btnContinuar = document.querySelector("#btn-continuar");
btnContinuar.addEventListener("click", async (event) => {
  var filterArrayCampos = arrayCamposObrigatorios.filter(
    (i) => $(i).val() == ""
  );

  if (filterArrayCampos.length > 0) {
    let textoAlert = `Preencha o campo: ${$(filterArrayCampos.filter((i) => $(i).val() == "")[0])
        .parent()
        .find("label")
        .text()
        .split(":")[0]
      }`;
    mostrarAlerta(textoAlert);
    return;
  }

  if (!atualizaDados && !cadastro) {
    var dadosPessoaCadastro = {
      idUsuario,
      telefone: [
        {
          tipo: "CELULAR",
          ddd: $("#telefone").val().substring(1, 3),
          numero: $("#telefone")
            .val()
            .substring(5, $("#telefone").val().length)
            .replace(/\D/g, ""),
          sms: true,
          preferencial: false,
        },
      ],
    };

    const response = await fetch("/api/v1/atualiza-contato", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ dadosPessoaCadastro }),
    });

    if (response.ok) {
      idUsuario = await response.json();
      console.log(idUsuario);
      showSwal();
    }

    $("#emailConf").val("");
    showSwal();
  }

  if (atualizaDados) {
    var emailNovoConfirmacao = $("#emailConf").val().trim();
    var emailDigitado = $("#email").val().trim();

    if (emailNovoConfirmacao == "" || emailDigitado == "") {
      mostrarAlerta("Preencha os dois campos de email para prosseguir!");
      return;
    }

    if (emailDigitado === emailNovoConfirmacao) {
      var dadosPessoaCadastro = {
        idUsuario,
        cpf: document.querySelector("#cpf").value,
        nome: document.querySelector("#nome").value,
        email: emailNovoConfirmacao,
        telefone: [
          {
            tipo: "CELULAR",
            ddd: $("#telefone").val().substring(1, 3),
            numero: $("#telefone")
              .val()
              .substring(5, $("#telefone").val().length)
              .replace(/\D/g, ""),
            sms: true,
            preferencial: false,
          },
        ],
        method: "PUT",
      };

      const response = await fetch("/api/v1/cadastro-usuario", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ dadosPessoaCadastro }),
      });
      if (response.ok) {
        idUsuario = await response.json();
        console.log(idUsuario);
        showSwal();
      }
    } else {
      mostrarAlerta("Os e-mails não são iguais. Favor informar novamente.");
    }
  }

  if (cadastro) {
    var emailNovoConfirmacao = $("#emailConf").val().trim();
    var emailDigitado = $("#email").val().trim();

    if (emailNovoConfirmacao != emailDigitado) {
      mostrarAlerta("Os e-mails não são iguais. Favor informar novamente.");
      return;
    }

    var dadosPessoaCadastro = {
      cpf: $("#cpf").val(),
      nome: $("#nome").val(),
      email: $("#email").val(),
      telefone: $("#telefone").val(),
      method: "POST",
    };

    const response = await fetch("/api/v1/cadastro-usuario", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ dadosPessoaCadastro }),
    });

    if (response.ok) {
      idUsuario = await response.json();
      console.log(idUsuario);
      showSwal();
    }
  }
});

function mostrarCampos() {
  arrayCampos.forEach((item) => {
    document.querySelector(item).classList.remove("hide");
    document.querySelector(item).parentElement.classList.remove("hide");
    document
      .querySelector(item)
      .parentElement.parentElement.classList.remove("hide");
  });
}

function ocultarCampos() {
  arrayCampos.forEach((item) => {
    document.querySelector(item).classList.add("hide");
    document.querySelector(item).parentElement.classList.add("hide");
    document
      .querySelector(item)
      .parentElement.parentElement.classList.add("hide");
  });
  
  document.querySelector("#selecione-servico").classList.remove("hide");
  document
    .querySelector("#servico")
    .parentElement.parentElement.parentElement.classList.remove("hide");
  document
    .querySelector("#servico")
    .parentElement.parentElement.classList.remove("hide");
}

function maskTelefone(value) {
  value = value.replace(/\D/g, "");
  value = value.replace(/(\d{2})(\d)/, "($1) $2");
  value = value.replace(/(\d{5})(\d)/, "$1-$2");
  return value;
}
var email = document.getElementById("email");

document.getElementById("emailConf").onchange = function () {
  if (email.value != "") {
    $("#btn-continuar").show();
  }
}

$("#servico").on("change", function (e) {
  if (e.target.value != "Selecione") {
    mostrarCampos();

    if (e.target.value == "Revisão de consumo") {
      document.querySelector("#documentos-button-anchor").href =
        "https://atendimentovirtual.embasa.ba.gov.br/carta-verificar-consumo";
    }

    if (e.target.value == "Parcelamento") {
      document.querySelector("#documentos-button-anchor").href =
        "https://atendimentovirtual.embasa.ba.gov.br/carta-simular-parcelamento";
    }

    if (e.target.value == "Alteração de Titularidade") {
      document.querySelector("#documentos-button-anchor").href =
        "https://atendimentovirtual.embasa.ba.gov.br/carta-de-servico-alteracao-de-titularidade";
    }
  } else {
    ocultarCampos();
  }
});

function showAgendamentoModal(telefone) {
  setTimeout(() => {
    $("#agendamento").on("change", function (e) {
      var ulData = document.querySelector("#horariosDisponiveis");

      ulData.innerHTML = "";
      horarioCalendarioSelecionado = $("#agendamento").val();
      diaCalendario = horarioCalendarioSelecionado.split("-")[2];
      mesCalendario = horarioCalendarioSelecionado.split("-")[1];
      anoCalendario = horarioCalendarioSelecionado.split("-")[0];
    });

    $("#agendamento").on("blur", function (e) {
      horarioCalendarioSelecionado = $("#agendamento").val();
      const dataSelecionada = new Date(horarioCalendarioSelecionado).getDay();
      if (dataSelecionada == 5 || dataSelecionada == 6) {
        $("#agendamento").val("");
        mostrarAlerta(
          "Você selecionou um dia do final de semana, onde não há atendimento. Favor selecionar outra data."
        );
      }
    });
  }, 2000);

  Swal.fire({
    title: "Conclua o seu agendamento:",
    html: `<section>
                        <form action="">
                            <input
                                    type="date"
                                    id="agendamento"
                                    name="agendamento"
                                    >
                            </input>
                            <button style="cursor: pointer; background: rgb(14, 67, 241); color: white; padding: 8px 12px; border: none; border-radius: 8px;" id="verifica-horarios">Verificar horários disponíveis</button>
                            <p id="data-text"></p>
                            <ul style="display: grid; grid-template-columns: 1fr 1fr 1fr; list-style: none;" id="horariosDisponiveis">
                            </ul>
                        </form>
                    </section>`,
    confirmButtonColor: "rgb(14, 67, 241)",
    showCancelButton: true,
    confirmButtonText:
      '<button style="cursor: pointer; border: none; background: none; color: white; font-size: 14px;" id="btn-continuar">Agendar</button>',
    cancelButtonText: "Cancelar",
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        imageUrl: "https://i.imgur.com/F6i53rk.jpg",
        imageHeight: "auto",
        imageAlt: "Agendamento confirmado.",
        showConfirmButton: false,
      });
      setTimeout(() => {
        fazerAgendamento(
          diaCalendario,
          mesCalendario,
          anoCalendario,
          horarioAgendamento,
          telefone
        );
      }, 5000);
      setTimeout(() => {
        window.location.reload();
      }, 5000);
    } else if (result.isDenied) {
      Swal.fire("Changes are not saved", "", "info");
    }
  });

  setDate();

  document
    .querySelector("#verifica-horarios")
    .addEventListener("click", function (e) {
      e.preventDefault();
      horarioCalendarioSelecionado = $("#agendamento").val();
      diaCalendario = horarioCalendarioSelecionado.split("-")[2];
      mesCalendario = horarioCalendarioSelecionado.split("-")[1];
      anoCalendario = horarioCalendarioSelecionado.split("-")[0];
      $(".swal2-confirm, #btn-continuar").show();
      var ulData = document.querySelector("#horariosDisponiveis");
      ulData.innerHTML = "";
      setInterval(() => {
        $('input[type="radio"]').on("change", function (e) {
          horarioAgendamento = e.target.value;
        });
      }, 500);
      consultarHorarios();
    });

  $(".swal2-confirm").hide();
}

function watchInputChange() {
  $(".swal2-confirm").hide();
  setTimeout(() => {
    $("#horariosDisponiveis .hrDisponiveis").on("click", function (e) {
      if (e.target.classList[1] == "false") {
        $(".swal2-confirm").hide();
      }

      if (e.target.classList[1] == "true") {
        $(".swal2-confirm").show();
      }
    });
  }, 1000);
}

var data = new Date();
const result = data.toLocaleDateString("pt-BR", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
});
var ano = data.getFullYear();
var mes = data.getUTCMonth();
var dia = data.getDate();
var horas = data.getHours();
var minutos = data.getMinutes();

function setDate() {
  if (minutos >= 0 <= 29) {
    minutos = 30;
  } else {
    minutos = 0;
  }

  $("#agendamento").attr("value", `${ano}-${mes + 1}-${dia}`);
  $("#agendamento").attr("min", `${ano}-${mes + 1}-${dia}`);

  let next30days = new Date(data.setDate(data.getDate() + 30));
  var ano30days = data.getFullYear();
  var mes30days = data.getUTCMonth() + 1;
  var dia30days = data.getDate();

  $("#agendamento").attr("max", `${ano30days}-${mes30days}-${dia30days}`);
}

function consultarHorarios() {
  var horarioCalendarioSelecionado = $("#agendamento").val();
  const servicoEscolhido = document.querySelector("#servico").value;
  var idAgenda;
  var idTipoAgendamento;

  if (servicoEscolhido == "Revisão de consumo") {
    idAgenda = 1;
    idTipoAgendamento = 36;
  } else if (servicoEscolhido == "Alteração de Titularidade") {
    idAgenda = 1;
    idTipoAgendamento = 35;
  } else if (servicoEscolhido == "Parcelamento") {
    idAgenda = 1;
    idTipoAgendamento = 37;
  }
  fetch("/getSchedule", {
    method: "POST",
    body: JSON.stringify({
      data: `${horarioCalendarioSelecionado}`,
      horario: "16:30:00",
      agenda: idAgenda,
    }),
  })
    .then((res) => res.json())
    .then((data) => {
      data[0].horaAgenda.forEach((item) => {
        var ulData = document.querySelector("#horariosDisponiveis");
        const li = document.createElement("li");
        if (item.disponivel == false) {
          li.innerHTML = "";
          li.innerHTML = `
                            <li>
                                <label style="opacity: 0.4; text-decoration: line-through;" class="radio span1 ">${item.hora}
                                    <input disabled type="radio" value="${item.hora}" name="horario" "="" data-id-externo="" class="hrDisponiveis ${item.disponivel}">
                                </label>
                            </li>
                        `;
        } else {
          li.innerHTML = "";
          li.innerHTML = `
                            <li>
                                <label class="radio span1 ">${item.hora}
                                    <input type="radio" value="${item.hora}" name="horario" "="" data-id-externo="" class="hrDisponiveis ${item.disponivel}">
                                </label>
                            </li>
                        `;
        }
        var diaCalendario = horarioCalendarioSelecionado.split("-")[2];
        var mesCalendario = horarioCalendarioSelecionado.split("-")[1];
        var anoCalendario = horarioCalendarioSelecionado.split("-")[0];
        $("#data-text").text(
          `Esses são os horários disponíveis para ${diaCalendario}/${mesCalendario}/${anoCalendario}`
        );
        ulData.insertAdjacentElement("beforeend", li);
        setTimeout(() => {
          $('input[type="radio"]').on("change", function (e) {
            horarioAgendamento = e.target.value;
          });
          $(".swal2-confirm, #btn-continuar").show();
        }, 1000);
      });
    });

  $(".swal2-confirm").hide();
  watchInputChange();
}

function fazerAgendamento(dia, mes, ano, horario, telefone) {
  const servicoEscolhido = document.querySelector("#servico").value;
  var idAgenda;
  var idTipoAgendamento;

  if (servicoEscolhido == "Revisão de consumo") {
    idAgenda = 1;
    idTipoAgendamento = 36;
  } else if (servicoEscolhido == "Alteração de Titularidade") {
    idAgenda = 1;
    idTipoAgendamento = 35;
  } else if (servicoEscolhido == "Parcelamento") {
    idAgenda = 1;
    idTipoAgendamento = 37;
  }

  fetch("/makeAppointment", {
    method: "POST",
    body: JSON.stringify({
      idAgenda: idAgenda,
      idPessoaEvento: idUsuario.id,
      isReagendamento: false,
      idAgendamentoAntigo: null,
      idRegistroFormulario: "",
      data: `${dia}/${mes}/${ano}`,
      horario: `${horario}`,
      perfilAtendimento: 0,
      idTipoAgendamento: idTipoAgendamento,
      registro: {
        ip_telefone_agendamento: telefone,
      },
    }),
  });
}

function limpaCampo(field) {
  $(`#${field}`).val("");
}

function regraCPF() {
  $("#btn-corrigeDados").hide();
  $("#emailConfirm").addClass("hide");
  $("#email").removeAttr("readonly");
  $("#email").css("background-color", "#fff");
}

async function isValidCPF(cpf) {
  cpf = cpf.value.replace(/[^\d]/g, "");

  if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf)) {
    mostrarAlerta(
      "O CPF fornecido é inválido. Digite um válido para prosseguir!"
    );
    setTimeout(() => {
      ["email", "telefone", "emailConfirm", "cpf"].forEach((i) => {
        limpaCampo(i);
      });
    }, 200);
    regraCPF();

    return (cpf.value = "");
  }

  let sum = 0;
  for (let i = 0; i < 9; i++) {
    sum += parseInt(cpf.charAt(i)) * (10 - i);
  }

  let firstVerifier = 11 - (sum % 11);
  if (firstVerifier > 9) firstVerifier = 0;

  if (parseInt(cpf.charAt(9)) !== firstVerifier) {
    mostrarAlerta(
      "O CPF fornecido é inválido. Digite um válido para prosseguir!"
    );
    setTimeout(() => {
      ["email", "telefone", "emailConfirm", "cpf"].forEach((i) => {
        limpaCampo(i);
      });
    }, 200);
    regraCPF();

    return (cpf.value = "");
  }

  sum = 0;
  for (let i = 0; i < 10; i++) {
    sum += parseInt(cpf.charAt(i)) * (11 - i);
  }

  let secondVerifier = 11 - (sum % 11);
  if (secondVerifier > 9) secondVerifier = 0;

  if (parseInt(cpf.charAt(10)) !== secondVerifier) {
    mostrarAlerta(
      "O CPF fornecido é inválido. Digite um válido para prosseguir!"
    );
    setTimeout(() => {
      ["email", "telefone", "emailConfirm", "cpf"].forEach((i) => {
        limpaCampo(i);
      });
    }, 200);
    regraCPF();

    return (cpf.value = "");
  }

  const response = await fetch("/api/v1/get-usuario", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ cpf }),
  });

  if (response.ok) {
    const data = await response.json();
    if (Object.keys(data).length > 0) {
      cadastro = false;
      botaoAtualizar = false;

      $("#emailConfirm").addClass("hide");

      dadosPessoa = {
        id: data.id,
        nome: data.nome,
        email: data.email,
        telefone: data.telefones
          ? data.telefones.length > 0
            ? `(${data.telefones[0].ddd}) ${data.telefones[0].numero}`
            : ""
          : "",
      };

      idUsuario = dadosPessoa.id;

      if (!data.email) {
        usuarioSemEmail = true;
        botaoAtualizar = true;
        // $("#emailConfirm").removeClass("hide");
      } else if (
        data.email != "" &&
        data.email != null &&
        data.email != undefined
      ) {
        usuarioSemEmail = false;
        $("#email").val(formatEmail(data.email) || "");
        $("#email").attr("readonly", true);
        $("#email").css("background-color", "#D3D3D3");
      }

      $("#btn-corrigeDados").show();
    } else {
      cadastro = true;
      botaoAtualizar = true;
      $("#email").removeAttr("readonly");
      $("#email").css("background-color", "#fff");
      $("#email").val("");

      //remove class da div mae
      $("#emailConfirm").removeClass("hide");
      //coloca o valor vazio dentro do input
      $("#emailConf").val("");

      $("#btn-corrigeDados").hide();
    }
  } else if (response.status === 404) {
    $("#email").removeAttr("readonly");
    $("#email").css("background-color", "#fff");
  }

  // return cpf.value;
}

function validateAndClearEmail(inputId) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const $inputField = $(`#${inputId}`);
  const email = $inputField.val().trim();

  if (!emailRegex.test(email)) {
    mostrarAlerta("E-mail inválido!");
    $inputField.val("");
    $("#btn-continuar").hide();
    return null;
  }

  return email;
}

function formatEmail(email) {
  if (email == "" || email == undefined) {
    return;
  }
  if (!email.includes("@")) return email;

  const [localPart, domain] = email.split("@");

  if (localPart.length <= 3) {
    return `${localPart}@${domain}`;
  }

  const start = localPart.slice(0, 2);
  const end = localPart.slice(-1);
  const hidden = "*".repeat(localPart.length - 3);

  return `${start}${hidden}${end}@${domain}`;
}

function showSwal(
  title = "Cadastro realizado com sucesso!",
  text = `Todos os dados pessoais coletados neste formulário são os estritamente necessários para a prestação do serviço e poderão ser compartilhados com as empresas terceirizadas que prestam serviços para a Embasa, tendo como base legal, o art. 7° da Lei Federal n° 13.709/2018.`,
  confirmButtonText = "OK"
) {
  const telefone = $("#telefone").val();
  Swal.fire({
    title: title,
    text: text,
    showCancelButton: false,
    confirmButtonText: confirmButtonText,
  }).then((result) => {
    if (result.isConfirmed) {
      showAgendamentoModal(telefone);
    } else if (result.dismiss === Swal.DismissReason.cancel) {
      this.disabled = true;
      mostrarAlerta(
        "Não é possível realizar agendamento sem atualizar os dados."
      );
    }
  });
}

function validatePhoneNumber(phoneNumber) {
  let cleaned = phoneNumber.value.replace(/[^0-9]/g, "");

  let valoresRepetidos = [
    "00000000000",
    "11111111111",
    "22222222222",
    "33333333333",
    "44444444444",
    "55555555555",
    "66666666666",
    "77777777777",
    "88888888888",
    "99999999999",
  ];

  if (
    cleaned.length < 10 ||
    cleaned.length > 11 ||
    valoresRepetidos.includes(cleaned)
  ) {
    mostrarAlerta("Número de telefone inválido.");
    $("#btn-continuar").hide();
    return (phoneNumber.value = "");
  }

  return cleaned;
}

function mostrarAlerta(mensagem) {
  return Swal.fire({
    title: "Atenção",
    text: mensagem,
    confirmButtonText: "OK",
  });
}