import './public-path.js'
import './frontend/polyfills'
import './frontend/lazy-load'
import './frontend/comments'
import { maybeMountPerfLogger } from './frontend/perf-log'
import { watchLayoutContainerForReveal } from './frontend/animated-element'
import { onDocumentLoaded, handleEntryPoints } from './helpers'
import { mountRenderHeaderLoop } from './frontend/header/render-loop'
import ctEvents from 'ct-events'
import $ from 'jquery'

maybeMountPerfLogger()

onDocumentLoaded(() => {
	handleEntryPoints([
		{
			els: '.ct-trending-block [data-page]',
			load: () => import('./frontend/trending-block'),
			events: ['ct:trending-block:mount']
		},

		{
			els: '[data-parallax]',
			load: () => import('./frontend/parallax/register-listener'),
			events: ['blocksy:parallax:init']
		},

		{
			els: '.flexy-container[data-flexy*="no"]',
			load: () => import('./frontend/flexy'),
			events: ['ct:flexy:update']
		},

		{
			els: '.ct-share-box [data-network]',
			load: () => import('./frontend/social-buttons')
		},

		{
			els: 'body.single-product',
			load: () => import('./frontend/woocommerce/single-product-gallery'),
			forcedEvents: ['ct:flexy:update']
		},

		{
			els: [
				document.querySelector('select')
					? [document.querySelector('select')]
					: []
			],
			load: () => import('./frontend/choices'),
			events: ['ct:custom-select:init']
		},

		{
			els: '.quantity .ct-increase',
			load: () => import('./frontend/woocommerce/quantity-input'),
			events: ['ct:add-to-cart:update'],
			forcedEvents: ['ct:add-to-cart:quantity']
		},

		{
			els: 'body.ct-ajax-add-to-cart',
			load: () => import('./frontend/woocommerce/add-to-cart-single'),
			events: ['ct:add-to-cart:update'],
			forcedEvents: ['ct:flexy:update']
		},

		{
			els: '.ct-back-to-top',
			load: () => import('./frontend/back-to-top-link'),
			events: ['ct:back-to-top:mount']
		},

		{
			els: '.ct-share-box[data-type="type-2"]',
			load: () => import('./frontend/share-box'),
			events: ['ct:single:share-box:update']
		},

		{
			els: ['.entries[data-layout]', '[data-products] > .products'],
			condition: () =>
				!!document.querySelector(
					'.ct-pagination:not([data-type="simple"])'
				),
			load: () => import('./frontend/layouts/infinite-scroll'),
			beforeLoad: el => watchLayoutContainerForReveal(el)
		},

		{
			els: [
				[
					...document.querySelectorAll(
						'.search-form[data-live-results]'
					)
				].filter(
					el =>
						!el.matches(
							'[id="search-modal"] .search-form[data-live-results]'
						) &&
						!el.matches(
							'.ct-sidebar .ct-widget .woocommerce-product-search'
						)
				)
			],
			load: () => import('./frontend/search-implementation'),
			mount: ({ mount, el }) =>
				mount(el, {
					postType: el.querySelector('[name="post_type"]')
						? `ct_forced_${
								el.querySelector('[name="post_type"]').value
						  }`
						: 'ct_forced_post'
				})
		},

		{
			els:
				'.ct-sidebar .ct-widget .search-form:not(.woocommerce-product-search)',
			load: () => import('./frontend/search-implementation')
		},

		{
			els: '.ct-sidebar .ct-widget .woocommerce-product-search',
			load: () => import('./frontend/search-implementation'),
			mount: ({ mount, el }) =>
				mount(el, {
					postType: 'ct_forced_product'
				})
		},

		{
			els: '[id="search-modal"] .search-form[data-live-results]',
			condition: () =>
				!!document.querySelector(
					'header[data-device] [data-id="search"]'
				),
			load: () => import('./frontend/search-implementation'),
			mount: ({ mount, el }) =>
				mount(el, {
					mode: 'modal',
					perPage: 6
				})
		},

		{
			els: 'header[data-device="desktop"] [data-id*="menu"] > .menu',
			condition: () =>
				!!document.querySelector(
					'header[data-device="desktop"] [data-id*="menu"] .menu-item-has-children'
				),
			load: () => import('./frontend/header/menu'),
			mount: ({ handleFirstLevelForMenu, el }) =>
				handleFirstLevelForMenu(el),
			events: [
				'ct:header:update',
				...(window.wp && wp.customize ? ['ct:header:render-frame'] : [])
			]
		},

		{
			els: [
				'header[data-device="desktop"] [data-id*="menu"] > .menu .menu-item-has-children > .sub-menu',
				'header[data-device="desktop"] [data-id*="menu"] > .menu .page_item_has_children > .sub-menu'
			],
			load: () => import('./frontend/header/menu'),
			mount: ({ handleUpdate, el }) => handleUpdate(el),
			events: ['ct:header:update']
		},

		{
			els: 'header[data-device="desktop"] [data-id^="menu"]',
			load: () => import('./frontend/header/responsive-desktop-menu'),
			events: ['ct:header:render-frame']
		},

		// TODO: mount this listener on offcanvas open/close
		{
			els: '#offcanvas .child-indicator',
			load: () => import('./frontend/mobile-menu')
		},

		{
			els: [
				'.ct-modal-action',
				'#main-container > header .ct-header-search > a[href]'
			],

			load: () => import('./frontend/overlay'),
			events: ['ct:header:update']
		},

		{
			els: '.ct-header-cart',
			load: () => import('./frontend/woocommerce/mini-cart'),
			events: ['ct:header:update']
		}
	])

	setTimeout(() => document.body.classList.remove('ct-loading'), 1500)

	mountRenderHeaderLoop()
})

ctEvents.on('ct:overlay:handle-click', ({ e, el, options = {} }) => {
	import('./frontend/overlay').then(({ handleClick }) => {
		handleClick(e, {
			container: document.querySelector(el.hash),
			...options
		})
	})
})

const initOverlayTrigger = () => {
	const menuToggle = document.querySelector('.ct-header-trigger')

	if (document.querySelector('#offcanvas')) {
		if (!document.querySelector('#offcanvas').hasListener) {
			document.querySelector('#offcanvas').hasListener = true

			document
				.querySelector('#offcanvas')
				.addEventListener('click', event => {
					if (
						event.target &&
						event.target.getAttribute('href') &&
						event.target.getAttribute('href')[0] === '#'
					) {
						const menuToggle = document.querySelector(
							'.ct-header-trigger'
						)

						menuToggle && menuToggle.click()
					}

					event.stopPropagation()
				})
		}
	}

	if (menuToggle && !menuToggle.hasListener) {
		menuToggle.hasListener = true

		menuToggle.addEventListener('click', event => {
			event.preventDefault()
			event.stopPropagation()

			import('./frontend/overlay').then(({ handleClick }) =>
				handleClick(event, {
					container: document.querySelector(
						document.querySelector('.ct-header-trigger').hash
					)
				})
			)
		})
	}
}

onDocumentLoaded(() => initOverlayTrigger())
ctEvents.on('ct:header:update', () => initOverlayTrigger())

if ($) {
	$(document).on('uael_quick_view_loader_stop', () => {
		ctEvents.trigger('ct:add-to-cart:quantity')
	})
}