document.addEventListener('DOMContentLoaded', function () {
  console.log('bestellformular.js loaded')
  // Rest of the code goes here
  const FORMDEBUG = false
  const btn = document.getElementById('bestellformular-btn')
  const bestellformular = document.getElementById('bestellformular')

  // custom Validation messages
  const messagesGerman = {
    required: 'Bitte füllen Sie dieses Feld aus',
    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
    minlength: 'Bitte geben Sie mindestens {0} Zeichen ein',
    maxlength: 'Bitte geben Sie maximal {0} Zeichen ein',
    min: 'Bitte geben Sie mindestens {0} ein',
    max: 'Bitte geben Sie maximal {0} ein',
    range: 'Bitte geben Sie zwischen {0} und {1} ein',
  }
  const messagesFrench = {
    required: 'Veuillez remplir ce champ',
    email: 'Veuillez saisir une adresse email valide',
    minlength: 'Veuillez saisir au moins {0} caractères',
    maxlength: 'Veuillez saisir au plus {0} caractères',
    min: 'Veuillez saisir au moins {0} caractères',
    max: 'Veuillez saisir au plus {0} caractères',
    range: 'Veuillez saisir au moins {0} et au plus {1} caractères',
  }
  
  // initieiere Zeitmessung zur Botprevention
  var startTime = Date.now()

  // Messe ob mit der Seite agiert wird
  var userInteracted = false

  function setUserInteracted() {
    var timeSpent = (Date.now() - startTime) / 1000 // Zeit in Sekunden
    if (timeSpent > 5) {
      btn.disabled = false
    }
    userInteracted = true
  }
  setTimeout(function () {
    if (userInteracted) {
      btn.disabled = false
    }
  }, 5000)
  // Eventlistener für Interaktionen - setzt userInteracted auf true bei Interaktion
  document.addEventListener('mousedown', setUserInteracted)
  document.addEventListener('touchstart', setUserInteracted)
  document.addEventListener('keydown', setUserInteracted)

  bestellformular.addEventListener('submit', function (e) {
    e.preventDefault()

    const form = e.target
    const notification = document.getElementById('notification')
    const zsrTooltip = document.getElementById('zsr-tooltip')

    // Spinner und button disabled anzeigen

    var endTime = Date.now()
    var timeSpent = (endTime - startTime) / 1000 // Zeit in Sekunden

    // Setze die Werte für die Botvalidierung zum Auswerten in PHP
    document.getElementById('age').value = timeSpent
    document.getElementById('hobbies').value = userInteracted ? 'true' : 'false'

    // Validierung der ZSR-Nummer
    const zsrNummer = form.elements['zsr_nummer'].value
    const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer)
    // TODO REGEX für ZSR-Nummer
    if (!isNumberOrBeantragt) {
      // Display error message for invalid zsr_nummer
      zsrTooltip.className = 'input-tooltip'
      // Scroll to the tooltip element
      zsrTooltip.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'})
      return
    }

    btn.innerHTML = ` 
        <svg class="text-gray-300 animate-spin mx-auto" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
          width="24" height="24">
          <path
            d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
            stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path
            d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
            stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-900">
          </path>
        </svg>
        `

    btn.disabled = true

    if (FORMDEBUG) {
      console.log('userInteracted: ' + userInteracted)
      console.log('timeSpent: ' + timeSpent)
      console.log('hobbies: ' + document.getElementById('hobbies').value)
      console.log('age: ' + document.getElementById('age').value)
      console.log('verify_email(honeypot): ' + document.getElementById('verify_email').value)
    }

    // Formulardaten an den Server senden
    const data = new FormData(form)
    fetch(form.action, {
      method: 'POST',
      mode: 'cors',
      body: data,
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok')
        }
        return response.json()
      })
      .then(data => {
        // Erfolgsnachricht anzeigen
        // TODO Nachricht anpassen wenn französische Version
        notification.textContent = 'Bestellformular erfolgreich gesendet!'
        btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut'
        setTimeout(() => {
          btn.style.visibility = 'hidden'
          btn.style.display = 'none'
          notification.style.visibility = 'visible'
          notification.style.display = 'block'
          notification.classList.remove('fadeIn') // Remove fadeIn class
          void notification.offsetWidth
          notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn'
        }, 1000)
        // setTimeout(() => notification.className = 'bg-green-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
      })
      .catch(error => {
        // Fehlermeldung anzeigen
        notification.textContent = 'Fehler beim Senden der Nachricht.'
        console.log(error)
        notification.className = 'bg-red-500 text-white px-4 py-2 rounded block'
        // setTimeout(() => notification.className = 'bg-red-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
      })
  })
})