;(() => {
	const nextElement = document.querySelector('link[rel=next]'), // next link element
		feedElement = document.querySelector('.post-feed') // post feed element
	if (!nextElement || !feedElement) return

	const state = {
		activeZoneHeight: 300,
		ticking: false,
		lastScrollY: window.scrollY,
		lastWindowHeight: window.innerHeight,
		lastDocumentHeight: document.documentElement.scrollHeight,
		href: nextElement.href
	}

	const app = {
		loading: false,
		onPageLoad(doc) {
			const nextElement = doc.querySelector('link[rel=next]')
			state.href = nextElement && nextElement.href
			!state.href && EventListeners.onDestroy()

			const postElements = doc.querySelectorAll('.post-card')
			Array.from(postElements).forEach(item => {
				console.log(`# ${item.querySelector('.post-card-title').innerHTML}`)
				// document.importNode is important, without it the item's owner
				// document will be different which can break resizing of
				// `object-fit: cover` images in Safari
				// feedElement.appendChild(body.importNode(item, true))
				feedElement.appendChild(item)
			})
		},
		onUpdate() {
			const {
					lastScrollY,
					lastWindowHeight,
					lastDocumentHeight,
					activeZoneHeight,
					href
				} = state,
				{ loading } = this

			if (loading || !href) return

			// return if not scroll to the bottom
			if (
				lastScrollY + lastWindowHeight <=
				lastDocumentHeight - activeZoneHeight
			) {
				state.ticking = false
				return
			}

			this.loading = true
			console.log('---- onUpdate: START', { href })
			fetch(href)
				.then(r => r.text())
				.then(text => new DOMParser().parseFromString(text, 'text/html'))
				.then(this.onPageLoad)
				.then(() => {
					console.log('---- onUpdate: END')
					// sync status
					this.loading = false
					state.lastDocumentHeight = document.documentElement.scrollHeight
					state.ticking = false
				})
		}
	}

	const requestTick = () => {
			state.ticking || requestAnimationFrame(app.onUpdate.bind(app))
			state.ticking = true
		},
		onScroll = event => {
			state.lastScrollY = window.scrollY
			requestTick()
		},
		onResize = event => {
			state.lastWindowHeight = window.innerHeight
			state.lastDocumentHeight = document.documentElement.scrollHeight
			requestTick()
		}

	const factoryListener = list => {
		let isCreated = false
		return {
			onCreate() {
				if (!isCreated) {
					list.forEach(element => addEventListener(...element))
					isCreated = true
				}
			},
			onDestroy() {
				if (isCreated) {
					list.forEach(element => removeEventListener(...element))
					isCreated = false
				}
			}
		}
	}

	const eventListeners = [
			['scroll', onScroll, { passive: true }],
			['resize', onResize]
		],
		EventListeners = factoryListener(eventListeners)
	EventListeners.onCreate()
})()