import { getCache } from './helpers'

import {
	responsiveClassesFor,
	stackingClassesFor,
	matchingResponsiveClassesFor
} from './footer'

const updateHeader = () => {
	const header = document.querySelector('header.site-header')
	const to = wp.customize('header_type')() || 'type-1'
	header.dataset.header = to

	const newHtml = getCache().querySelector(
		`.ct-customizer-preview-cache [data-id="header"] [data-type="${to}"]`
	).innerHTML

	const e = document.createElement('div')
	e.innerHTML = newHtml

	if (header.querySelector('.header-desktop')) {
		header.removeChild(header.querySelector('.header-desktop'))
	}

	while (e.firstElementChild) {
		header.insertBefore(
			e.firstElementChild,
			header.querySelector('.header-mobile')
		)
	}

	;[...document.querySelectorAll('.site-header .search-button')].map(el =>
		responsiveClassesFor('header_search_visibility', el)
	)

	if (to === 'type-1') {
		document.querySelector(
			'[data-type="type-1"] [data-menu-alignment]'
		).dataset.menuAlignment = wp.customize('menu_alignment')()
	}

	;[...document.querySelectorAll('.site-header .ct-header-cart')].map(el =>
		responsiveClassesFor('header_cart_visibility', el)
	)
	;[...document.querySelectorAll('.site-header .special-elements')].map(el =>
		matchingResponsiveClassesFor(
			el,
			'header_cart_visibility',
			'header_search_visibility'
		)
	)

	if (wp.customize('has_cart_badge')() === 'yes') {
		document
			.querySelector('.site-header .ct-header-cart')
			.removeAttribute('data-skip-badge')
	} else {
		document.querySelector(
			'.site-header .ct-header-cart'
		).dataset.skipBadge =
			''
	}

	const miniCartHtml = getCache().querySelector(
		`.ct-customizer-preview-cache [data-header-cart="${wp.customize(
			'mini_cart_type'
		)()}"]`
	).innerHTML
	;[...document.querySelectorAll('.site-header .ct-cart-icon')].map(
		el => (el.innerHTML = miniCartHtml)
	)

	ctEvents.trigger('ct:header:update')
}

wp.customize('header_type', val => val.bind(to => updateHeader()))
wp.customize('search_icon_panel', val => val.bind(to => updateHeader()))
wp.customize('menu_alignment', val => val.bind(to => updateHeader()))
wp.customize('header_search_visibility', val => val.bind(to => updateHeader()))
wp.customize('header_cart_visibility', val => val.bind(to => updateHeader()))
wp.customize('has_cart_badge', val => val.bind(to => updateHeader()))
wp.customize('mini_cart_type', val => val.bind(to => updateHeader()))
wp.customize('header_container', val =>
	val.bind(to => {
		const headerBar = document.querySelector(
			'.header-desktop[data-type="type-1"]'
		)

		if (!headerBar) return

		headerBar.firstElementChild.classList.remove(
			[...headerBar.firstElementChild.classList].find(
				className => className.indexOf('ct-container') > -1
			)
		)

		headerBar.firstElementChild.classList.add(
			`ct-container${to === 'fluid' ? '-fluid' : ''}`
		)
	})
)

wp.customize('nav_container', val =>
	val.bind(to => {
		const headerBar = document.querySelector(
			'.header-desktop[data-type="type-2"]'
		)

		if (!headerBar) return

		headerBar.lastElementChild.firstElementChild.classList.remove(
			[...headerBar.lastElementChild.firstElementChild.classList].find(
				className => className.indexOf('ct-container') > -1
			)
		)

		headerBar.lastElementChild.firstElementChild.classList.add(
			`ct-container${to === 'fluid' ? '-fluid' : ''}`
		)
	})
)

wp.customize('mobile_header_type', val =>
	val.bind(to => (document.querySelector('.header-mobile').dataset.type = to))
)