import './public-path.js'
import './frontend/polyfills'
import './frontend/ct-events.js'
import './frontend/lazy-load.js'
import './frontend/comments'
import './frontend/social-buttons'
import { maybeMountPerfLogger } from './frontend/perf-log'
import './frontend/selectize'

maybeMountPerfLogger()

document.addEventListener('DOMContentLoaded', () => {
	if (document.querySelector('.ct-quantity')) {
		import('./frontend/woocommerce/quantity-input').then(({ mount }) =>
			mount()
		)
	}
})

document.addEventListener('DOMContentLoaded', () => {
	if (document.querySelector('.ct-header-cart')) {
		import('./frontend/woocommerce/mini-cart').then(({ mount }) => mount())
	}
})

document.addEventListener('DOMContentLoaded', () => {
	;[
		...document.querySelectorAll(['.ct-sidebar .ct-widget .search-form'])
	].map(formEl =>
		import('./frontend/search-implementation.js').then(
			({ handleSingleSearchForm }) => handleSingleSearchForm(formEl)
		)
	)
	;[...document.querySelectorAll(['[id="search-modal"] .search-form'])].map(
		formEl =>
			import('./frontend/search-implementation.js').then(
				({ handleSingleSearchForm }) =>
					handleSingleSearchForm(formEl, {
						mode: 'modal',
						perPage: 6
					})
			)
	)
})

const initMenu = () => {
	;[
		...document.querySelectorAll(
			'header.site-header [id="site-navigation"] > .primary-menu'
		)
	].map(
		menu =>
			getComputedStyle(
				document.querySelector('.mobile-menu-toggle'),
				':before'
			).content.indexOf('mobile') === -1 &&
			import('./frontend/menu').then(({ handleFirstLevelForMenu }) =>
				handleFirstLevelForMenu(menu)
			)
	)
	;[
		...document.querySelectorAll(
			'header.site-header [id="site-navigation"] > .primary-menu .menu-item-has-children > .sub-menu'
		)
	].map(
		menu =>
			getComputedStyle(
				document.querySelector('.mobile-menu-toggle'),
				':before'
			).content.indexOf('mobile') === -1 &&
			import('./frontend/menu').then(({ handleUpdate }) =>
				handleUpdate(menu)
			)
	)
}

const initMobileMenu = () =>
	[
		...document.querySelectorAll(
			'header.site-header .mobile-menu .menu-arrow'
		)
	].map(arrow =>
		import('./frontend/mobile-menu').then(({ handleArrow }) =>
			handleArrow(arrow)
		)
	)

const initSearch = () =>
	[
		...document.querySelectorAll([
			'.ct-modal-action',
			'header.site-header .search-button'
		])
	].map(singleAction =>
		import('./frontend/search-overlay').then(({ initSingleModal }) =>
			initSingleModal(singleAction)
		)
	)

document.addEventListener('DOMContentLoaded', () => {
	initMenu()
	initMobileMenu()
	initSearch()
})

ctEvents.on('ct:header:update', () => {
	initMenu()
	initMobileMenu()
	initSearch()
})