<script>
  // Importeer de `enhance` functie uit de SvelteKit app/forms module
  import { enhance } from "$app/forms";
  // Importeer de `onMount` functie uit Svelte om code uit te voeren zodra de component gemount is
  import { onMount } from 'svelte';

  // Declareer variabelen om de staat van het formulier bij te houden
  let isSubmitting = false;
  let successMessage = "";
  let errorMessage = "";
  // Objecten om foutmeldingen en validiteitsstatussen bij te houden voor de formuliervelden
  let errors = {
    name: "",
    email: "",
    phone: "",
    message: ""
  };
  let validity = {
    name: false,
    email: false,
    phone: false,
    message: false
  };

  // Functie die wordt gebruikt om het formulier te verbeteren met extra functionaliteit
  function handleEnhance({ formElement }) {
    // Deze functie wordt aangeroepen bij het indienen van het formulier
    const handleSubmit = async ({ result }) => {
      isSubmitting = false;
      successMessage = "";
      errorMessage = "";

      // Controleer of het indienen van het formulier succesvol was of niet
      if (result.type === "failure") {
        errorMessage = result.data.error;
      } else if (result.type === "success") {
        formElement.reset();
        successMessage = result.data.message;
        validity = { name: false, email: false, phone: false, message: false };
      }
    };
    return handleSubmit;
  }

  // Functie om individuele velden te valideren op basis van hun naam en waarde
  function validateField(name, value) {
    switch (name) {
      case 'name':
        if (!value) return "Name is required";
        return "";
      case 'email':
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!value) return "Email is required";
        if (!emailRegex.test(value)) return "Invalid email format";
        return "";
      case 'phone':
        const phoneRegex = /^\d{10,15}$/;
        if (!value) return "Phone is required";
        if (!phoneRegex.test(value)) return "Invalid phone number";
        return "";
      case 'message':
        if (!value) return "Message is required";
        return "";
      default:
        return "";
    }
  }

  // Functie om inputveranderingen af te handelen en te valideren
  function handleInput(event) {
    const { name, value } = event.target;
    const error = validateField(name, value);
    errors[name] = error;
    validity[name] = !error;
  }

  // Gebruik de `onMount` lifecycle hook om het formulier in te stellen zodra de component gemount is
  onMount(() => {
    const form = document.querySelector('form');
    form.addEventListener('input', handleInput);
  });
</script>

<!-- HTML voor het formulier -->
<section class="form-container">
  <form
    method="POST"
    use:enhance={handleEnhance}
    on:submit={() => (isSubmitting = true)}
    class="contact-form"
  >
    <fieldset class="form-wrapper">
      <legend class="form-legend">Personal Information</legend>
      <label for="name" class="form-label">
        <span>Name</span>
        <div class="input-wrapper">
          <i class="icon user-icon"></i>
          <input
            type="text"
            name="name"
            id="name"
            required
            placeholder="e.g John Doe"
            class="input-field {errors.name ? 'input-error' : validity.name ? 'input-success' : ''}"
          />
        </div>
      </label>
      <!-- Toon foutmelding als er een fout is voor het naamveld -->
      {#if errors.name}
        <p class="error-message">{errors.name}</p>
      {/if}

      <label for="email" class="form-label">
        <span>Email</span>
        <div class="input-wrapper">
          <i class="icon email-icon"></i>
          <input
            type="email"
            name="email"
            id="email"
            required
            placeholder="e.g [email protected]"
            class="input-field {errors.email ? 'input-error' : validity.email ? 'input-success' : ''}"
          />
        </div>
      </label>
      <!-- Toon foutmelding als er een fout is voor het emailveld -->
      {#if errors.email}
        <p class="error-message">{errors.email}</p>
      {/if}

      <label for="phone" class="form-label">
        <span>Phone</span>
        <div class="input-wrapper">
          <i class="icon phone-icon"></i>
          <input
            type="tel"
            name="phone"
            id="phone"
            required
            placeholder="Mobile number"
            class="input-field {errors.phone ? 'input-error' : validity.phone ? 'input-success' : ''}"
          />
        </div>
      </label>
      <!-- Toon foutmelding als er een fout is voor het telefoonveld -->
      {#if errors.phone}
        <p class="error-message">{errors.phone}</p>
      {/if}
    </fieldset>

    <fieldset class="form-wrapper">
      <label for="message" class="form-label">
        <span>Message</span>
        <textarea
          name="message"
          id="message"
          required
          placeholder="Tell me your message..."
          class="input-field textarea-field {errors.message ? 'input-error' : validity.message ? 'input-success' : ''}"
        ></textarea>
      </label>
      <!-- Toon foutmelding als er een fout is voor het berichtveld -->
      {#if errors.message}
        <p class="error-message">{errors.message}</p>
      {/if}
    </fieldset>

    <!-- Toon succesbericht als het formulier succesvol is ingediend -->
    {#if successMessage}
      <p class="success-message">{successMessage}</p>
    {/if}

    <!-- Toon foutmelding als er een fout is bij het indienen van het formulier -->
    {#if errorMessage}
      <p class="error-message">{errorMessage}</p>
    {/if}

    <!-- Verstuurknop, die wordt uitgeschakeld tijdens het verzenden -->
    <button type="submit" class="btn btn-primary" disabled={isSubmitting}>
      {#if isSubmitting}
        Sending...
      {:else}
        Send
      {/if}
    </button>
  </form>
</section>