const form = document.querySelector("#registration-form");
const message = document.querySelector("#message");
const postalCodeInput = form.elements.postalCode;
const cityInput = form.elements.city;
const citySuggestions = document.querySelector("#city-suggestions");
const postalCodes = fetch("/postnumre.json")
  .then((response) => {
    if (!response.ok) throw new Error("Postnummerlisten kunne ikke hentes.");
    return response.json();
  })
  .catch(() => null);

function showMessage(text, type) {
  message.textContent = text;
  message.className = `notice ${type}`;
  message.hidden = false;
}

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const payload = Object.fromEntries(new FormData(form).entries());
  const button = form.querySelector("button");
  button.disabled = true;

  try {
    const response = await fetch("/api/visitors", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      showMessage("Registreringen kunne ikke gemmes. Tjek felterne og prøv igen.", "error");
      return;
    }

    form.reset();
    citySuggestions.replaceChildren();
    showMessage("Tak, du er registreret.", "success");
  } catch {
    showMessage("Der er ikke forbindelse til registreringen lige nu.", "error");
  } finally {
    button.disabled = false;
  }
});

async function updateCity() {
  postalCodeInput.value = postalCodeInput.value.replace(/\D/g, "").slice(0, 4);
  const postalCode = postalCodeInput.value;
  citySuggestions.replaceChildren();
  cityInput.value = "";

  if (postalCode.length !== 4) return;

  const cities = await postalCodes;
  if (postalCodeInput.value !== postalCode || !cities) return;

  const city = cities[postalCode];
  if (!city) return;

  const option = document.createElement("option");
  option.value = city;
  citySuggestions.append(option);
  cityInput.value = city;
}

postalCodeInput.addEventListener("input", updateCity);
postalCodeInput.addEventListener("change", updateCity);
if (postalCodeInput.value) updateCity();