function formSubmission ({ form, button, messages }) {
  const widgetId = form.getAttribute('widgetId')
  const mapMessages = document.querySelector(
    `.modal-${widgetId} #map-enquiry-appraisal-form-messages`
  )

  function displaySuccessMessage () {
    messages.innerHTML = 'Your enquiry has been sent.'

    if (mapMessages) {
      mapMessages.innerText = 'Your enquiry has been sent.'
      mapMessages.classList.add('success')
    }

    form.querySelector('.g-recaptcha').hidden = true
    form.style.display = 'none'
    form.reset()
    messages.classList.add('success')

    if (widgetId) {
      const resultWrapper = document.querySelector(
        `.modal-${widgetId} .result-inner-wrapper`
      )
      if (resultWrapper) {
        resultWrapper.classList.add('active')
      }
      dropMarkers()
    }
  }

  function triggerFlowModal (responseJson) {
    if (responseJson.outRangeResult && widgetId) {
      document.getElementById(`flow-modal-${widgetId}`).click()
    }
  }

  function displayErrorMessage (responseJSON) {
    button.disabled = false
    const ul = document.createElement('ul')
    for (const message of responseJSON.messages) {
      const li = document.createElement('li')
      li.appendChild(document.createTextNode(message))
      ul.appendChild(li)
    }

    popErrorMessage(messages, ul)

    if (mapMessages) {
      popErrorMessage(mapMessages, ul)
    }
  }

  function dropMarkers () {
    const mapWrapper = document.querySelector(`.modal-${widgetId} .map-wrapper`)
    if (mapWrapper) {
      mapWrapper.classList.add('add-markers')
    }
  }

  function hideMessage (message, className) {
    setTimeout(() => {
      message.classList.remove(className)
    }, 3500)
  }

  function popErrorMessage (targetElement, content) {
    targetElement.innerHTML = ''
    targetElement.classList.add('error')
    targetElement.appendChild(content)

    hideMessage(targetElement, 'error')
  }

  function onSubmit (event) {
    event.preventDefault()
    button.disabled = true
    fetch(event.target.action, {
      method: 'POST',
      headers: {
        'x-requested-with': 'XMLHttpRequest'
      },
      body: new FormData(event.target)
    })
      .then(response => {
        const redirectURL = response.headers.get('HX-Redirect')
        if (redirectURL) {
          window.location = redirectURL
        } else if (response.status === 412 || response.status >= 500) {
          response.json().then(displayErrorMessage)
        } else {
          displaySuccessMessage()
          response.json().then(triggerFlowModal)
        }
      })
      .catch(console.error)
  }

  form.addEventListener('submit', onSubmit)
}

const calculateStuffTriggers = document.querySelectorAll(
  '[data-action=calculator-modal]'
)
const calculateStuffCloseTriggers = document.querySelectorAll(
  '[data-calculator-close]'
)

for (let i = 0; i < calculateStuffTriggers.length; i++) {
  // add listeners to open the modal
  calculateStuffTriggers[i].addEventListener('click', function (event) {
    document.querySelector(
      `[data-calculator-${event.target.dataset.id}]`
    ).style.display = 'block'
    event.preventDefault()
  })
  // add listeners to close modal
  calculateStuffCloseTriggers[i].addEventListener('click', function (event) {
    event.target.closest('#calculate-stuff-modal').style.display = 'none'
  })
}