document.addEventListener('DOMContentLoaded', () => {
    // opening a popup
    var clickedLink
    $('a[href*="#modal"]').click(function(){
        clickedLink = $(this)
        let hrefAttr = $(this).attr('href')
        let popupID = hrefAttr.split('=')[1]
        // open the popup which ID matches to buttons href parameter
        // e.g. click on button with href #modal?popup=popup-sign-up
        // will open a popup with ID #popup-sign-up
        let thePopup = document.getElementById(popupID)
        thePopup.classList.remove('visibility-hidden')
        thePopup.querySelectorAll('button, [href], input, [tabindex="0"]')[0].focus()
    })

    // closing a modal
    document.querySelectorAll('.popup').forEach(popup => {
        popup.querySelector('.close').addEventListener('click', function() {
            this.closest('.popup').classList.add('visibility-hidden')
            clickedLink.focus()
        })
    })

    // check if modal content fits
    var popupFit = function() {
        document.querySelectorAll('.popup').forEach(popup => {
            let popupContent = popup.querySelector('.container')
            if(popupContent.offsetHeight > window.innerHeight - 160 && window.innerWidth > 768) {
                popup.classList.remove('display-flex')
                popup.classList.add('overflow-auto')
            } else {
                popup.classList.add('display-flex')
                popup.classList.remove('overflow-auto')
            }
        })
    }
    popupFit()
    window.addEventListener('resize', function () {
        popupFit()
    })

    // close on Esc tap
    document.addEventListener('keydown', function(e) {
        if (e.key == 'Escape') {
            $('.popup').addClass('visibility-hidden')
            clickedLink.focus()
        }
    })
})