import ctEvents from 'ct-events'
import {
	updateAndSaveEl,
	ehandleBackgroundOptionFor,
	typographyOption,
	getRootSelectorFor,
	assembleSelector,
	mutateSelector,
	responsiveClassesFor,
} from 'blocksy-customizer-sync'

const getVariables = ({ itemId, panelType }) => ({
	searchBoxMaxWidth: [
		{
			selector: assembleSelector(
				getRootSelectorFor({ itemId, panelType })
			),
			variable: 'max-width',
			responsive: true,
			unit: '%',
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: [getRootSelectorFor({ itemId, panelType })[0]],
					operation: 'suffix',
					to_add: '[data-middle="search-input"]',
				})
			),
			variable: 'search-box-max-width',
			responsive: true,
			unit: '%',
		},
	],

	headerSearchBoxHeight: {
		selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
		variable: 'form-field-height',
		responsive: true,
		unit: 'px',
	},

	// default state
	sb_font_color: [
		{
			selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
			variable: 'form-text-initial-color',
			type: 'color:default',
		},

		{
			selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
			variable: 'form-text-focus-color',
			type: 'color:focus',
		},
	],

	sb_icon_color: [
		{
			selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
			variable: 'icon-color',
			type: 'color:default',
		},

		{
			selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
			variable: 'icon-focus-color',
			type: 'color:focus',
		},
	],

	sb_border_color: [
		{
			selector: assembleSelector(
				getRootSelectorFor({ itemId, panelType })
			),
			variable: 'form-field-border-initial-color',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				getRootSelectorFor({ itemId, panelType })
			),
			variable: 'form-field-border-focus-color',
			type: 'color:focus',
			responsive: true,
		},
	],

	sb_background: [
		{
			selector: assembleSelector(
				getRootSelectorFor({ itemId, panelType })
			),
			variable: 'form-field-initial-background',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				getRootSelectorFor({ itemId, panelType })
			),
			variable: 'form-field-focus-background',
			type: 'color:focus',
			responsive: true,
		},
	],

	// transparent state
	transparent_sb_font_color: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-text-initial-color',
			type: 'color:default',
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-text-focus-color',
			type: 'color:focus',
		},
	],

	transparent_sb_icon_color: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'icon-color',
			type: 'color:default',
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'icon-focus-color',
			type: 'color:focus',
		},
	],

	transparent_sb_border_color: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-field-border-initial-color',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-field-border-focus-color',
			type: 'color:focus',
			responsive: true,
		},
	],

	transparent_sb_background: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-field-initial-background',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-field-focus-background',
			type: 'color:focus',
			responsive: true,
		},
	],

	// sticky state
	sticky_sb_font_color: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'form-text-initial-color',
			type: 'color:default',
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'form-text-focus-color',
			type: 'color:focus',
		},
	],

	sticky_sb_icon_color: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'icon-color',
			type: 'color:default',
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'icon-focus-color',
			type: 'color:focus',
		},
	],

	sticky_sb_border_color: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'form-field-border-initial-color',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'form-field-border-focus-color',
			type: 'color:focus',
			responsive: true,
		},
	],

	sticky_sb_background: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-field-initial-background',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),

			variable: 'form-field-focus-background',
			type: 'color:focus',
			responsive: true,
		},
	],

	sb_radius: {
		selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
		type: 'spacing',
		variable: 'form-field-border-radius',
		responsive: true,
	},

	sb_margin: {
		selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
		type: 'spacing',
		variable: 'margin',
		responsive: true,
		important: true,
	},

	...typographyOption({
		id: 'sb_dropdown_font',
		selector: assembleSelector(
			mutateSelector({
				selector: getRootSelectorFor({ itemId, panelType }),
				operation: 'suffix',
				to_add: '.ct-search-results',
			})
		),
	}),

	sb_dropdown_text: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'suffix',
					to_add: '.ct-search-results',
				})
			),
			variable: 'linkInitialColor',
			type: 'color:default',
			responsive: true,
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'suffix',
					to_add: '.ct-search-results',
				})
			),
			variable: 'linkHoverColor',
			type: 'color:hover',
			responsive: true,
		},
	],

	sb_dropdown_background: [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId, panelType }),
					operation: 'suffix',
					to_add: '.ct-search-results',
				})
			),
			variable: 'search-dropdown-background',
			type: 'color:default',
			responsive: true,
		},
	],

	sb_dropdown_divider: {
		selector: assembleSelector(
			mutateSelector({
				selector: getRootSelectorFor({ itemId, panelType }),
				operation: 'suffix',
				to_add: '.ct-search-results',
			})
		),
		variable: 'items-divider',
		type: 'border',
	},

	sb_dropdown_shadow: {
		selector: assembleSelector(
			mutateSelector({
				selector: getRootSelectorFor({ itemId, panelType }),
				operation: 'suffix',
				to_add: '.ct-search-results',
			})
		),
		type: 'box-shadow',
		variable: 'search-dropdown-box-shadow',
		responsive: true,
	},

	// footer logo
	footer_search_box_horizontal_alignment: {
		selector: assembleSelector(
			mutateSelector({
				selector: getRootSelectorFor({
					itemId,
					panelType: 'footer',
				}),
				operation: 'replace-last',
				to_add: '[data-column="search-input"]',
			})
		),
		variable: 'horizontal-alignment',
		responsive: true,
		unit: '',
	},

	footer_search_box_vertical_alignment: {
		selector: assembleSelector(
			mutateSelector({
				selector: getRootSelectorFor({
					itemId,
					panelType: 'footer',
				}),
				operation: 'replace-last',
				to_add: '[data-column="search-input"]',
			})
		),
		variable: 'vertical-alignment',
		responsive: true,
		unit: '',
	},
})

ctEvents.on(
	'ct:header:sync:collect-variable-descriptors',
	(variableDescriptors) => {
		variableDescriptors['search-input'] = ({ itemId }) =>
			getVariables({ itemId, panelType: 'header' })
	}
)

ctEvents.on(
	'ct:footer:sync:collect-variable-descriptors',
	(variableDescriptors) => {
		variableDescriptors['search-input'] = ({ itemId }) =>
			getVariables({ itemId, panelType: 'footer' })
	}
)

ctEvents.on(
	'ct:header:sync:item:search-input',
	({ values: { search_box_placeholder }, optionId, optionValue }) => {
		const selector = '[data-id="search-input"] input[type="search"]'

		if (optionId === 'search_box_placeholder') {
			updateAndSaveEl(selector, (el) => {
				el.placeholder = optionValue
			})
		}

		if (optionId === 'live_results_images') {
			updateAndSaveEl(selector, (el) => {
				const searchModal = el.closest('[data-live-results]')
				if (searchModal) {
					let liveResultsAttr = searchModal.dataset.liveResults.split(':')
					if (optionValue === 'yes') {
						liveResultsAttr.push('thumbs')
					} else {
						liveResultsAttr = liveResultsAttr.filter(
							(attr) => attr !== 'thumbs'
						)
					}

					searchModal.dataset.liveResults = liveResultsAttr.join(':')
				}
			})
		}

		if (optionId === 'searchHeaderProductPrice') {
			updateAndSaveEl(selector, (el) => {
				const searchModal = el.closest('[data-live-results]')

				if (searchModal) {
					let liveResultsAttr = searchModal.dataset.liveResults.split(':')

					if (optionValue === 'yes') {
						liveResultsAttr.push('product_price')
					} else {
						liveResultsAttr = liveResultsAttr.filter(
							(attr) => attr !== 'product_price'
						)
					}

					searchModal.dataset.liveResults = liveResultsAttr.join(':')
					searchModal.querySelector('[name="ct_product_price"]').value =
						optionValue === 'yes'
				}
			})
		}

		if (optionId === 'visibility') {
			updateAndSaveEl('[data-id="search-input"]', (el) =>
				responsiveClassesFor({ ...optionValue, desktop: true }, el)
			)
		}
	}
)

ctEvents.on(
	'ct:footer:sync:item:search-input',
	({ values: { search_box_placeholder }, optionId, optionValue }) => {
		const selector =
			'.ct-footer [data-id="search-input"] input[type="search"]'
		const el = document.querySelector(selector)

		if (optionId === 'search_box_placeholder') {
			el.placeholder = optionValue
		}

		if (optionId === 'live_results_images') {
			if (el.closest('[data-live-results]')) {
				el.closest('[data-live-results]').dataset.liveResults =
					optionValue === 'yes' ? 'thumbs' : ''
			}
		}

		if (optionId === 'footer_visibility') {
			responsiveClassesFor(
				optionValue,
				document.querySelector('.ct-footer [data-id="search-input"]')
			)
		}
	}
)