export const initSingleModal = el => {
	initAnimatedModal(el, {
		modalTarget: el.hash
	})
}

function initAnimatedModal(el, options) {
	var settings = {
		modalTarget: 'animatedModal',
		animatedIn: 'ct-fade-in',
		animatedOut: 'ct-fade-out',

		...options
	}

	var href = el.hash

	var modalContainer = document
		.querySelector(settings.modalTarget)
		.querySelector('.ct-modal-container')

	modalContainer.addEventListener('click', function(e) {
		e.stopPropagation()
	})

	el.addEventListener('click', function(event) {
		event.preventDefault()

		let id = document.querySelector(el.hash)
		let modalContainer = id.querySelector('.ct-modal-container')

		id.classList.add('opened')

		document.body.classList.add('ct-modal-open')

		id.classList.add('active')

		modalContainer.classList.add(
			...[`${settings.animatedIn}`, `ct-animated`]
		)

		modalContainer.querySelector('input') &&
			modalContainer.querySelector('input').focus()

		modalContainer.parentNode.addEventListener(
			'touchmove',
			e => {
				e.stopImmediatePropagation()
				e.preventDefault()
			},
			true
		)

		modalContainer.addEventListener(
			'animationend',
			() => {
				modalContainer.classList.remove(
					...[`${settings.animatedIn}`, `ct-animated`]
				)
			},
			{ once: true }
		)

		const onEnd = event => {
			const { keyCode, target } = event
			if (keyCode !== 27) return
			event.preventDefault()
			document.removeEventListener('keyup', onEnd)
			closeModal(id)
		}

		document.addEventListener('keyup', onEnd)

		id.querySelector('.ct-modal-close').addEventListener(
			'click',
			event => {
				event.preventDefault()
				event.stopPropagation()

				closeModal(id)
			},
			{ once: true }
		)

		id.addEventListener('click', event => closeModal(id), { once: true })
	})

	function closeModal($el) {
		var modalContainer = $el.querySelector('.ct-modal-container')

		modalContainer.classList.add(settings.animatedOut, `ct-animated`)
		$el.classList.remove('active')

		modalContainer.addEventListener(
			'animationend',
			() => {
				document.body.classList.remove('ct-modal-open')

				modalContainer.classList.remove(
					settings.animatedOut,
					`ct-animated`
				)

				$el.classList.remove('opened')
			},
			{ once: true }
		)
	}
}