import { markImagesAsLoaded } from '../../../../frontend/lazy-load-helpers'
import {
	getCache,
	getFreshHtmlFor,
	checkAndReplace,
	getOptionFor,
	isVisibleFor,
	responsiveClassesFor,
	watchOptionsWithPrefix
} from '../../helpers'

watchOptionsWithPrefix({
	getOptionsForPrefix: () => [
		'related_products_columns',
		'related_products',
		'related_products_visibility',
		'upsell_products_visibility'
	],

	render: () => {
		if (!document.querySelector('.product')) return
		;[...document.querySelectorAll('.related.products')].map(el =>
			el.remove()
		)
		;[...document.querySelectorAll('.up-sells.products')].map(el =>
			el.remove()
		)

		const upsells = getFreshHtmlFor('upsell-products')
		const related = getFreshHtmlFor('single-related')

		if (isVisibleFor(getOptionFor('upsell_products_visibility'))) {
			while (upsells.firstElementChild) {
				document
					.querySelector('.product')
					.parentNode.appendChild(upsells.firstElementChild)
			}
		}

		if (isVisibleFor(getOptionFor('related_products_visibility'))) {
			while (related.firstElementChild) {
				document
					.querySelector('.product')
					.parentNode.appendChild(related.firstElementChild)
			}
		}

		let relatedProducts = document.querySelector(
			'.up-sells.products .products'
		)
		let upsellProducts = document.querySelector(
			'.related.products .products'
		)

		;[relatedProducts, upsellProducts].map(el => {
			if (!el) {
				return
			}

			el.classList.remove('columns-2', 'columns-3', 'columns-4')

			el.classList.add(
				`columns-${wp.customize('related_products_columns')()}`
			)

			const amountToRemove =
				Math.min(8, el.children.length) -
				parseInt(wp.customize('related_products')(), 10)

			if (amountToRemove > 0) {
				;[...Array(amountToRemove)].map(() =>
					el.removeChild(el.lastElementChild)
				)
			}

			markImagesAsLoaded(el)
		})
	}
})