import { markImagesAsLoaded } from '../../../frontend/lazy-load-helpers'
import {
	getCache,
	setRatioFor,
	changeTagName,
	getOptionFor,
	watchOptionsWithPrefix
} from '../helpers'
import { renderComments } from '../comments'

export const refreshRelatedPosts = () => {
	if (!document.body.classList.contains('single')) {
		return
	}

	const relatedPostsContainer = document.querySelector(
		'.ct-related-posts-container'
	)
	const relatedPosts = document.querySelector('.ct-related-posts')

	if (relatedPostsContainer) {
		relatedPostsContainer.remove()
	}

	if (relatedPosts) {
		relatedPosts.remove()
	}

	if (wp.customize('has_related_posts')() !== 'yes') {
		return
	}

	const newWrapper = document.createElement('div')
	if (
		!getCache().querySelector(
			'.ct-customizer-preview-cache [data-part="related-posts"]'
		)
	) {
		return
	}

	newWrapper.innerHTML = getCache().querySelector(
		'.ct-customizer-preview-cache [data-part="related-posts"]'
	).innerHTML

	const relatedPostsContainment = wp.customize('related_posts_containment')()

	if (newWrapper.firstElementChild) {
		if (relatedPostsContainment === 'separated') {
			document
				.querySelector('.site-main')
				.appendChild(newWrapper.firstElementChild)

			document
				.querySelector('.ct-related-posts-container')
				.firstElementChild.classList.remove(
					'ct-container',
					'ct-container-narrow'
				)

			document
				.querySelector('.ct-related-posts-container')
				.firstElementChild.classList.add(
					wp.customize('related_structure')() === 'normal'
						? 'ct-container'
						: 'ct-container-narrow'
				)
		} else {
			document
				.querySelector('.site-main #primary > div > section > article')
				.appendChild(
					newWrapper.firstElementChild.querySelector(
						'.ct-related-posts'
					)
				)
		}
	}

	Array.from(
		new Array(8 - parseInt(wp.customize('related_posts_count')() || 8, 10))
	).map(
		() =>
			document.querySelector('.site-main .ct-related-posts[data-columns]')
				.children.length -
				1 >
				parseInt(wp.customize('related_posts_count')() || 8, 10) &&
			document
				.querySelector('.site-main .ct-related-posts[data-columns]')
				.removeChild(
					document.querySelector(
						'.site-main .ct-related-posts[data-columns]'
					).lastElementChild
				)
	)

	document.querySelector(
		'.site-main .ct-related-posts[data-columns]'
	).dataset.columns = wp.customize('related_posts_columns')() || 3

	document.querySelector(
		'.site-main .ct-related-posts .ct-block-title'
	).innerHTML = wp.customize('related_label')()

	changeTagName(
		document.querySelector('.site-main .ct-related-posts .ct-block-title'),
		wp.customize('related_label_wrapper')()
	)

	const metaElements = wp.customize('related_meta_elements')()

	if (!metaElements.author) {
		;[
			...document.querySelectorAll(
				'.site-main .ct-related-posts .entry-meta .avatar-container'
			)
		].map(el => {
			el.parentNode.classList.remove('has-avatar')
			el.remove()
		})
		;[
			...document.querySelectorAll(
				'.site-main .ct-related-posts .entry-meta .ct-meta-author'
			)
		].map(el => el.remove())
	}

	if (!metaElements.comments) {
		;[
			...document.querySelectorAll(
				'.site-main .ct-related-posts .entry-meta .ct-meta-comments'
			)
		].map(el => el.remove())
	}

	if (!metaElements.date) {
		;[
			...document.querySelectorAll(
				'.site-main .ct-related-posts .entry-meta .ct-meta-date'
			)
		].map(el => el.remove())
	}

	if (!metaElements.categories) {
		;[
			...document.querySelectorAll(
				'.site-main .ct-related-posts .entry-meta .ct-meta-categories'
			)
		].map(el => el.remove())
	}

	;[
		...document.querySelectorAll('.site-main .ct-related-posts .entry-meta')
	].map(el => el.children.length === 0 && el.remove())

	if (wp.customize('has_related_meta_label')() === 'no') {
		;[
			...document.querySelectorAll(
				'.site-main .ct-related-posts .entry-meta .ct-meta-label'
			)
		].map(label => label.remove())
	}

	;[
		...document.querySelectorAll(
			'.site-main .ct-related-posts .entry-meta .ct-meta-date .ct-meta-element'
		),
		...document.querySelectorAll(
			'.site-main .ct-related-posts .entry-meta .ct-meta-updated-date .ct-meta-element'
		)
	].map(dateEl => {
		dateEl.innerHTML = window.wp.date.format(
			wp.customize('related_date_format_source')() === 'default'
				? dateEl.dataset.defaultFormat
				: wp.customize('related_meta_date_format')() || 'M j, Y',
			moment(dateEl.dataset.date)
		)
	})
	;[
		...document.querySelectorAll(
			'.ct-related-posts[data-columns] .ct-image-container .ct-ratio'
		)
	].map(el => setRatioFor(wp.customize('related_featured_image_ratio')(), el))

	markImagesAsLoaded(document.querySelector('.site-main'))
	renderComments({ prefix: 'post' })
}

export const relatedOptions = [
	'has_related_posts',
	'related_location',
	'related_meta_elements',
	'has_related_meta_label',
	'related_date_format_source',
	'related_meta_date_format',
	'related_structure',
	'related_posts_columns',
	'related_posts_count',
	'related_label',
	'related_label_wrapper',
	'related_featured_image_ratio',
	'related_posts_containment'
]

watchOptionsWithPrefix({
	getOptionsForPrefix: () => relatedOptions,
	render: () => refreshRelatedPosts()
})