import $ from 'jquery'
import Popper from 'popper.js'

let mounted = false

const mountCartPopper = () => {
	const selector = '.ct-header-cart'
	;[...document.querySelectorAll(selector)].map(singleCart => {
		if (singleCart.hasPoppers) return
		singleCart.hasPoppers = true

		new Popper(
			singleCart.querySelector('a'),
			singleCart.querySelector('.ct-cart-content'),
			{
				modifiers: {
					applyStyle: { enabled: false },
					setCustomStyle: {
						enabled: true,
						order: 100000000,
						fn: ({
							flipped,
							instance,
							instance: { reference, popper },
							popper: { left },
							placement,
							styles
						}) =>
							(popper.dataset.placement =
								placement === 'left' ? 'left' : 'right')
					}
				},
				placement: 'right'
			}
		)
	})
}

// fwEvents.on('ct:header:update', mountCartPopper)

export const mount = () => {
	if (!$) return

	mountCartPopper()

	const selector = '.ct-header-cart'

	if (mounted) {
		return
	}

	mounted = true

	$(document.body).on('adding_to_cart', () =>
		[...document.querySelectorAll(selector)].map(cart => {
			cart.classList.remove('ct-added')
			cart.classList.add('ct-adding')
		})
	)

	$(document.body).on('wc_fragments_loaded', () =>
		setTimeout(() => ctEvents.trigger('ct:images:lazyload:update'))
	)

	$(document.body).on('added_to_cart', (_, fragments, __, button) => {
		button = button[0]
		;[...document.querySelectorAll(selector)].map(cart => {
			cart.classList.remove('ct-adding')
			cart.classList.add('ct-added')

			cart.querySelector('.ct-cart-content').innerHTML = Object.values(
				fragments
			)[0]

			cart.dataset.count =
				parseInt(cart.dataset.count, 10) +
				parseInt(button.dataset.quantity, 10)
		})
	})

	$(document.body).on('removed_from_cart', (_, __, ___, button) =>
		[...document.querySelectorAll(selector)].map(cart => {
			if (!button) return

			cart.dataset.count =
				parseInt(cart.dataset.count, 10) -
				parseInt(
					button[0].closest('li').querySelector('span.quantity')
						.textContent,
					10
				)
		})
	)
}