import { markImagesAsLoaded } from './lazy-load-helpers'

const loadPage = (args = {}) => {
	args = {
		el: null,
		// prev | next
		action: null,

		...args
	}

	if (!args.el) {
		return
	}

	if (!args.action) {
		return
	}

	if (args.el.classList.contains('ct-loading')) {
		return
	}

	let currentPage = parseInt(args.el.dataset.page, 10)

	if (args.action === 'prev' && currentPage === 1) {
		return
	}

	if (args.el.querySelectorAll('.ct-container > a').length < 4) {
		if (currentPage === 1) {
			return
		}
	}

	if (args.el.classList.contains('ct-last-page')) {
		if (args.action === 'next') {
			return
		}
	}

	args.el.classList.add('ct-loading')

	let newPage = args.action === 'prev' ? currentPage - 1 : currentPage + 1

	fetch(
		`${ct_localizations.ajax_url}?action=blocksy_get_trending_posts&page=${newPage}`
	).then(response => {
		response.json().then(({ success, data }) => {
			if (!success) {
				return
			}

			let {
				posts: { is_last_page, posts }
			} = data

			if (is_last_page) {
				args.el.classList.add('ct-last-page')
			} else {
				args.el.classList.remove('ct-last-page')
			}

			;[...args.el.querySelectorAll('a')].map(el => el.remove())

			args.el.dataset.page = newPage

			posts.map(post =>
				args.el.insertAdjacentHTML(
					'beforeend',
					`<a href="${post.url}">
                        ${post.image}
                        <h3 class="ct-item-title">
                         ${post.title}
                        </h3>
                    </a>`
				)
			)

			setTimeout(() => {
				args.el.classList.add('ct-enter-active')

				requestAnimationFrame(() => {
					args.el.classList.remove('ct-enter-active')
					args.el.classList.add('ct-active')

					setTimeout(() => {
						args.el.classList.remove('ct-active')
						args.el.classList.remove('ct-loading')
					}, 950)
				})
			})

			markImagesAsLoaded(args.el)
		})
	})
}

export const mount = el => {
	if (el.hasListeners) {
		return
	}

	el.hasListeners = true

	el.querySelector('.ct-arrow-left').addEventListener('click', e => {
		e.preventDefault()
		loadPage({ el, action: 'prev' })
	})

	el.querySelector('.ct-arrow-right').addEventListener('click', e => {
		e.preventDefault()
		loadPage({ el, action: 'next' })
	})
}