import { getHeroVariables } from './hero-section'
import { getPostListingVariables } from './template-parts/content-loop'

const allVariables = {
	colorPalette: [
		{
			variable: 'paletteColor1',
			type: 'color:color1'
		},

		{
			variable: 'paletteColor2',
			type: 'color:color2'
		},

		{
			variable: 'paletteColor3',
			type: 'color:color3'
		},

		{
			variable: 'paletteColor4',
			type: 'color:color4'
		},

		{
			variable: 'paletteColor5',
			type: 'color:color5'
		}
	],

	// Page Hero
	...getHeroVariables(),
	...getPostListingVariables(),

	// Colors
	fontColor: {
		variable: 'fontColor',
		type: 'color'
	},

	linkColor: {
		variable: 'linkColor',
		type: 'color'
	},

	linkColor: [
		{
			selector: ':root',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: ':root',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	buttonColor: [
		{
			selector: ':root',
			variable: 'buttonInitialColor',
			type: 'color:default'
		},

		{
			selector: ':root',
			variable: 'buttonHoverColor',
			type: 'color:hover'
		}
	],

	siteBackground: {
		variable: 'siteBackground',
		type: 'color'
	},

	// Layout
	maxSiteWidth: {
		variable: 'maxSiteWidth',
		unit: 'px'
	},

	contentAreaSpacing: {
		variable: 'contentAreaSpacing',
		responsive: true,
		unit: ''
	},

	narrowContainerWidth: {
		variable: 'narrowContainerWidth',
		unit: '%'
	},

	wideOffset: {
		variable: 'wideOffset',
		unit: 'px'
	},

	// Logo
	logoMaxHeight: {
		variable: 'logoMaxHeight',
		responsive: true,
		unit: 'px'
	},

	headerLogoSpacing: {
		variable: 'headerLogoSpacing',
		responsive: true,
		unit: ''
	},

	// Header
	headerBackground: {
		variable: 'headerBackground',
		type: 'color'
	},

	headerShadow: {
		variable: 'headerShadow',
		type: 'color'
	},

	headerSpacing: {
		variable: 'headerSpacing',
		responsive: true,
		unit: ''
	},

	// main menu
	menuFontColor: [
		{
			selector: '.primary-menu',
			variable: 'menuInitialColor',
			type: 'color:default'
		},

		{
			selector: '.primary-menu',
			variable: 'menuHoverColor',
			type: 'color:hover'
		}
	],

	headerMenuItemsSpacing: {
		selector: '.header-desktop',
		variable: 'menuItemsSpacing',
		unit: 'px'
	},

	dropdownFontColor: [
		{
			selector: '.primary-menu .sub-menu',
			variable: 'menuInitialColor',
			type: 'color:default'
		},

		{
			selector: '.primary-menu .sub-menu',
			variable: 'menuHoverColor',
			type: 'color:hover'
		}
	],

	navSectionSpacing: {
		variable: 'navSectionSpacing',
		responsive: true,
		unit: ''
	},

	navSectionBorder: {
		variable: 'navSectionBorder',
		type: 'color'
	},

	navSectionBackground: {
		variable: 'navSectionBackground',
		type: 'color'
	},

	dropdownMenuWidth: {
		variable: 'dropdownMenuWidth',
		unit: 'px'
	},

	dropDownBackground: {
		variable: 'dropDownBackground',
		type: 'color'
	},

	// Top bar
	topBarFontColor: {
		variable: 'topBarFontColor',
		type: 'color'
	},

	topBarLinkColor: [
		{
			selector: '.header-top-bar',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.header-top-bar',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	topBarBackground: {
		variable: 'topBarBackground',
		type: 'color'
	},

	topBarMenuItemsSpacing: {
		selector: '.header-top-bar-menu',
		variable: 'menuItemsSpacing',
		responsive: true,
		unit: 'px'
	},

	topBarSpacing: {
		variable: 'topBarSpacing',
		responsive: true,
		unit: ''
	},

	// Mobile header
	mobileHeaderBackground: {
		variable: 'mobileHeaderBackground',
		type: 'color'
	},

	mobileHeaderSpacing: {
		variable: 'mobileHeaderSpacing',
		responsive: true,
		unit: ''
	},

	mobileMenuIconColor: [
		{
			selector: '.mobile-menu-toggle',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.mobile-menu-toggle',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	mobileMenuLinkColor: [
		{
			selector: '.mobile-menu',
			variable: 'menuInitialColor',
			type: 'color:default'
		},

		{
			selector: '.mobile-menu',
			variable: 'menuHoverColor',
			type: 'color:hover'
		}
	],

	mobileMenuBackground: {
		selector: '.main-navigation',
		variable: 'modalBackground',
		type: 'color'
	},

	// Header Search Modal
	searchHeaderIconColor: [
		{
			selector: '.search-button',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.search-button',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	searchHeaderLinkColor: [
		{
			selector: '#search-modal',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '#search-modal',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	searchHeaderBackground: {
		selector: '#search-modal',
		variable: 'modalBackground',
		type: 'color'
	},

	// Header Cart
	cartHeaderIconColor: [
		{
			selector: '.ct-cart-icon',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.ct-cart-icon',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	cartBadgeColor: [
		{
			selector: '.ct-header-cart',
			variable: 'cartBadgeBackground',
			type: 'color:background'
		},

		{
			selector: '.ct-header-cart',
			variable: 'cartBadgeText',
			type: 'color:text'
		}
	],

	cartFontColor: [
		{
			selector: '.ct-cart-content',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.ct-cart-content',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	cartDropDownBackground: {
		selector: '.ct-cart-content',
		variable: 'cartDropDownBackground',
		type: 'color'
	},

	// Sidebar
	sidebarWidth: {
		variable: 'sidebarWidth',
		unit: ''
	},

	sidebarOffset: {
		variable: 'sidebarOffset',
		unit: 'px'
	},

	sidebarWidgetsTitleColor: {
		selector: '.ct-sidebar',
		variable: 'widgetsTitleColor',
		type: 'color'
	},

	sidebarWidgetsFontColor: {
		selector: '.ct-sidebar',
		variable: 'widgetsFontColor',
		type: 'color'
	},

	sidebarWidgetsLink: [
		{
			selector: '.ct-sidebar',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.ct-sidebar',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	sidebarBackgroundColor: {
		variable: 'sidebarBackgroundColor',
		type: 'color'
	},

	sidebarWidgetsSpacing: {
		variable: 'sidebarWidgetsSpacing',
		responsive: true,
		unit: 'px'
	},

	sidebarInnerSpacing: {
		variable: 'sidebarInnerSpacing',
		responsive: true,
		unit: 'px'
	},

	// Related Posts
	relatedPostsContainerSpacing: {
		variable: 'relatedPostsContainerSpacing',
		responsive: true,
		unit: ''
	},

	relatedPostsLabelColor: {
		variable: 'relatedPostsLabelColor',
		type: 'color'
	},

	relatedPostsLinkColor: [
		{
			selector: '.ct-related-posts',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.ct-related-posts',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	relatedPostsMetaColor: {
		variable: 'relatedPostsMetaColor',
		type: 'color'
	},

	relatedPostsContainerColor: {
		variable: 'relatedPostsContainerColor',
		type: 'color'
	},

	// Posts Navigation
	postNavSpacing: {
		variable: 'postNavSpacing',
		responsive: true,
		unit: ''
	},

	// Share Box
	topShareBoxSpacing: {
		variable: 'topShareBoxSpacing',
		responsive: true,
		unit: ''
	},

	bottomShareBoxSpacing: {
		variable: 'bottomShareBoxSpacing',
		responsive: true,
		unit: ''
	},

	// Autor Box
	singleAuthorBoxSpacing: {
		variable: 'singleAuthorBoxSpacing',
		responsive: true,
		unit: ''
	},

	singleAuthorBoxBackground: {
		variable: 'singleAuthorBoxBackground',
		type: 'color'
	},

	singleAuthorBoxBorder: {
		variable: 'singleAuthorBoxBorder',
		type: 'color'
	},

	singleAuthorBoxShadow: {
		variable: 'singleAuthorBoxShadow',
		type: 'color'
	},

	// Footer
	footerWidgetsTitleColor: {
		selector: '.footer-widgets',
		variable: 'widgetsTitleColor',
		type: 'color'
	},

	footerWidgetsFontColor: {
		selector: '.footer-widgets',
		variable: 'widgetsFontColor',
		type: 'color'
	},

	footerWidgetsLink: [
		{
			selector: '.footer-widgets',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.footer-widgets',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	widgetsAreaBackground: {
		variable: 'widgetsAreaBackground',
		type: 'color'
	},

	widgetsAreaDivider: {
		variable: 'widgetsAreaDivider',
		type: 'color'
	},

	widgetAreaSpacing: {
		variable: 'widgetAreaSpacing',
		responsive: true,
		unit: ''
	},

	// Footer Primary bar
	footerMenuItemsSpacing: {
		selector: '.footer-menu',
		variable: 'menuItemsSpacing',
		responsive: true,
		unit: 'px'
	},

	footerPrimaryColor: {
		variable: 'footerPrimaryColor',
		type: 'color'
	},

	footerPrimaryLink: [
		{
			selector: '.footer-primary-area',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.footer-primary-area',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	footerPrimaryBackground: {
		variable: 'footerPrimaryBackground',
		type: 'color'
	},

	footerPrimarySpacing: {
		variable: 'footerPrimarySpacing',
		responsive: true,
		unit: ''
	},

	// Copyright
	copyrightText: {
		variable: 'copyrightText',
		type: 'color'
	},

	copyrightBackground: {
		variable: 'copyrightBackground',
		type: 'color'
	},

	copyrightSpacing: {
		variable: 'copyrightSpacing',
		responsive: true,
		unit: ''
	},


	// Woocommerce archive
	productGalleryWidth: {
		variable: 'productGalleryWidth',
		unit: '%'
	},

	cardProductTitleColor: [
		{
			selector: '.shop-entry-card',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.shop-entry-card',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	cardProductCategoriesColor: [
		{
			selector: '.product-categories',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.product-categories',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	cardProductPriceColor: {
		selector: '.shop-entry-card .price',
		variable: 'fontColor',
		type: 'color'
	},

	cardStarRatingColor: {
		selector: '.shop-entry-card',
		variable: 'starRatingColor',
		type: 'color'
	},

	saleBadgeColor: [
		{
			selector: '.shop-entry-card',
			variable: 'saleBadgeTextColor',
			type: 'color:text'
		},

		{
			selector: '.shop-entry-card',
			variable: 'saleBadgeBackgroundColor',
			type: 'color:background'
		}
	],

	cardProductImageOverlay: {
		selector: '.shop-entry-card',
		variable: 'imageOverlay',
		type: 'color'
	},

	cardProductAction1Color: [
		{
			selector: '.woo-card-actions',
			variable: 'linkInitialColor',
			type: 'color:default'
		},

		{
			selector: '.woo-card-actions',
			variable: 'linkHoverColor',
			type: 'color:hover'
		}
	],

	cardProductAction2Color: [
		{
			selector: '.woo-card-actions',
			variable: 'wooButtonInitialColor',
			type: 'color:default'
		},

		{
			selector: '.woo-card-actions',
			variable: 'wooButtonHoverColor',
			type: 'color:hover'
		}
	],

	// Woocommerce single
	singleProductPriceColor: {
		selector: '.entry-summary .price',
		variable: 'fontColor',
		type: 'color'
	},
	
	singleSaleBadgeColor: [
		{
			selector: '.product > span.onsale',
			variable: 'saleBadgeTextColor',
			type: 'color:text'
		},

		{
			selector: '.product > span.onsale',
			variable: 'saleBadgeBackgroundColor',
			type: 'color:background'
		}
	],

	singleStarRatingColor: {
		selector: '.entry-summary,.woocommerce-tabs',
		variable: 'starRatingColor',
		type: 'color'
	},
}

export const maybePromoteScalarValueIntoResponsive = value =>
	/**
	 * Responsive value must necessarily have the desktop key attached to it
	 */
	value.desktop
		? value
		: {
				desktop: value,
				tablet: value,
				mobile: value
			}

const replaceVariableInStyleTag = (
	variableDescriptor,
	value,
	device = 'desktop'
) => {
	const deviceMapping = {
		desktop: 'ct-main-styles-inline-css',
		tablet: 'ct-main-styles-tablet-inline-css',
		mobile: 'ct-main-styles-mobile-inline-css'
	}

	const cssContainer = document.querySelector(`#${deviceMapping[device]}`)

	const existingCss = cssContainer.innerText

	const selector = variableDescriptor.selector || ':root'

	const selectorRegex = new RegExp(
		`${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s?{[\\s\\S]*?}`,
		'gm'
	)

	const matchedSelector = existingCss.match(selectorRegex)

	if (!matchedSelector) return

	cssContainer.innerText = existingCss.replace(
		selectorRegex,
		matchedSelector[0].replace(
			new RegExp(`--${variableDescriptor.variable}:[\\s\\S]*?;`, 'gm'),
			`--${variableDescriptor.variable}: ${value};`
		)
	)
}

const handleSingleVariableFor = (variableDescriptor, value) =>
	[
		...(variableDescriptor.selector
			? document.querySelectorAll(variableDescriptor.selector)
			: [document.documentElement])
	].map(el => {
		if (!variableDescriptor.responsive) {
			replaceVariableInStyleTag(
				variableDescriptor,
				`${
					(variableDescriptor.type || '').indexOf('color') > -1
						? value[
								variableDescriptor.type === 'color'
									? 'default'
									: variableDescriptor.type.split(':')[1]
							].color
						: variableDescriptor.extractValue
							? variableDescriptor.extractValue(value)
							: value
				}${variableDescriptor.unit || ''}`
			)

			return
		}

		value = maybePromoteScalarValueIntoResponsive(value)

		value = variableDescriptor.extractValue
			? variableDescriptor.extractValue(value)
			: value

		replaceVariableInStyleTag(
			variableDescriptor,
			`${value.desktop}${variableDescriptor.unit || ''}`,
			'desktop'
		)

		replaceVariableInStyleTag(
			variableDescriptor,
			`${value.tablet}${variableDescriptor.unit || ''}`,
			'tablet'
		)

		replaceVariableInStyleTag(
			variableDescriptor,
			`${value.mobile}${variableDescriptor.unit || ''}`,
			'mobile'
		)
	})

wp.customize.bind(
	'change',
	e =>
		allVariables[e.id] &&
		(Array.isArray(allVariables[e.id])
			? allVariables[e.id]
			: [allVariables[e.id]]
		).map(d => handleSingleVariableFor(d, e()))
)