(() => {
  const body = document.querySelector('body')
  const modalButtons = document.querySelectorAll('button[data-toggle="modal"]')

  for (const button of modalButtons) button.onclick = () => openModal(button)

  function openModal(button) {
    const modalId = button.getAttribute('data-target')
    const modal = document.getElementById(modalId)

    body.classList.add('modal-open')
    const fadeEffectDiv = document.createElement('div')
    fadeEffectDiv.className = 'modal-backdrop fade show'
    body.appendChild(fadeEffectDiv)

    modal.classList.add('show')
    modal.style.display = 'block'

    const outsideClickHandler = handleClickOutside(modal, fadeEffectDiv)

    const closeButtons = modal.querySelectorAll('button[data-dismiss="modal"]')
    for (const button of closeButtons) button.onclick = () => closeModal(modal, fadeEffectDiv, outsideClickHandler)

  }

  function handleClickOutside(modal, fadeEffectDiv) {
    const handler = event => {
      const content = modal.querySelector('.modal-content')
      const shouldCloseModal = !content.contains(event.target)

      if (shouldCloseModal) {
        closeModal(modal, fadeEffectDiv, handler)
      }
    }
    document.addEventListener('click', handler , { capture: true })

    return handler
  }

  function closeModal(modal, fadeEffectDiv, outsideClickHandler) {
    body.classList.remove('modal-open')
    body.removeChild(fadeEffectDiv)

    modal.classList.remove('show')
    modal.style.display = 'none'

    document.removeEventListener('click', outsideClickHandler, { capture: true })
  }

})()