import { handleBackgroundOptionFor } from '../../../../static/js/customizer/sync/variables/background'
import ctEvents from 'ct-events'
import { updateAndSaveEl } from '../../../../static/js/frontend/header/render-loop'
import { responsiveClassesFor } from '../../../../static/js/customizer/sync/helpers'

ctEvents.on(
	'ct:header:sync:collect-variable-descriptors',
	variableDescriptors => {
		variableDescriptors['account'] = {
			accountHeaderIconSize: {
				selector: '.ct-header-account',
				variable: 'iconSize',
				responsive: true,
				unit: 'px'
			},

			accountHeaderAvatarSize: {
				selector: '.ct-header-account',
				variable: 'avatarSize',
				responsive: true,
				unit: 'px'
			},

			accountHeaderColor: [
				{
					selector: '.ct-header-account',
					variable: 'linkInitialColor',
					type: 'color:default',
					responsive: true
				},

				{
					selector: '.ct-header-account',
					variable: 'linkHoverColor',
					type: 'color:hover',
					responsive: true
				}
			],

			...handleBackgroundOptionFor({
				id: 'accountHeaderBackground',
				selector: '#account-modal'
			}),

			accountHeaderMargin: {
				selector: '.ct-header-account',
				type: 'spacing',
				variable: 'margin',
				responsive: true,
				important: true
			}
		}
	}
)

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

	if (optionId === 'has_account_label') {
		updateAndSaveEl(selector, el => {
			;[...el.querySelectorAll('.ct-label')].map(label => {
				label.removeAttribute('hidden')

				if (optionValue !== 'yes') {
					label.hidden = true
				}
			})
		})
	}
})