---
import { Icon } from "astro-icon/components";

const ID = `contact-form-${Math.random().toString(36)}`;
---

<form
  class="mx-auto mt-8 max-w-xl space-y-6 rounded bg-white p-8 shadow-lg dark:bg-gray-900"
  id={ID}
>
  <div>
    <label for="name" class="block font-bold">Name</label>
    <input
      type="text"
      id="name"
      name="name"
      required
      class="mt-2 block w-full rounded p-2 shadow dark:bg-gray-600"
    />
  </div>
  <div>
    <label for="email" class="block font-bold">Your email</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      class="mt-2 block w-full rounded p-2 shadow dark:bg-gray-600"
    />
  </div>
  <div>
    <label for="subject" class="block font-bold">Subject</label>
    <input
      type="text"
      id="subject"
      name="subject"
      class="mt-2 block w-full rounded p-2 shadow dark:bg-gray-600"
    />
  </div>
  <div>
    <label for="message" class="block font-bold">Message</label>
    <textarea
      id="message"
      name="message"
      rows="4"
      class="mt-2 block w-full rounded p-2 shadow dark:bg-gray-600"></textarea>
  </div>
  <button
    id="submit"
    type="submit"
    class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow transition hover:bg-white hover:ring-2"
    ><Icon
      name="mdi:loading"
      id="loading-icon"
      class="mr-4 hidden animate-spin"
    /><span id="response-message" class="inline">Send message</span></button
  >
</form>

<script define:vars={{ ID }}>
  function init() {
    const form = document.getElementById(ID);
    const responseMsg = form.querySelector("#response-message");
    const button = form.querySelector("#submit");
    const loadingIcon = form.querySelector("#loading-icon");

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

      loadingIcon.classList.replace("hidden", "inline");
      responseMsg.textContent = "Sending...";
      button.disabled = true;

      try {
        const formData = new FormData(form);
        const response = await fetch("/api/email/contact/", {
          method: "POST",
          body: formData
        });

        const data = await response.json();

        if (response.ok) {
          responseMsg.textContent = data.message;
          form.reset();
        } else {
          responseMsg.textContent = data.message;
        }
      } catch (err) {
        responseMsg.textContent =
          "An error occurred. Please refresh the page and try again.";
      }

      loadingIcon.classList.replace("inline", "hidden");

      setTimeout(() => {
        responseMsg.textContent = "Send message";
        button.disabled = false;
      }, 10000);
    });
  }

  init();
  document.addEventListener("astro:after-swap", init);
</script>