jQuery(function( $ ) {

	/**
	 * Handle Cutomizer's options changes and apply them to Preview
	 */
	
	wp.customize( 'sunset_logo_width', function( value ) {
		value.bind( function( newVal ) {
			$('.logo img').css('width', `${newVal}px`);
		} );
	});

	wp.customize( 'sunset_header_background_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$('.site-header .header').css('background-color', newVal);
			} else {
				$('.site-header .header').css('background-color', 'transparent');
			}
			
		} );
	});
	
	wp.customize( 'sunset_header_menu_color', function( value ) {
		value.bind( function( newVal ) {
			$('.main-nav-menu.main-nav-menu--regular  > li:not(.current-menu-item) > a').css('--menu-color', newVal);
		} );
	});

	wp.customize( 'sunset_header_menu_hover_color', function( value ) {
		value.bind( function( newVal ) {
			$('.main-nav-menu.main-nav-menu--regular  > li.current-menu-item > a').css('--menu-hover-color', newVal);
			$('.main-nav-menu.main-nav-menu--regular  > li:not(.current-menu-item) > a').css('--menu-hover-color', newVal);
			$(`<style>.main-nav-menu--regular.main-nav-menu--underlined > li > a:before{border-color: ${newVal};}</style>`).appendTo('head');
		} );
	});

	wp.customize( 'sunset_header_add_social', function( value ) {
		value.bind( function( newVal ) {
			if ( newVal ) {
				$('.site-header .social-menu').show();
			} else {
				$('.site-header .social-menu').hide();
			}
			
		} );
	});

	wp.customize( 'sunset_header_add_shadow', function( value ) {
		value.bind( function( newVal ) {
			if ( newVal ) {
				$('.site-header').addClass('site-header--with-shadow');
			} else {
				$('.site-header').removeClass('site-header--with-shadow');
			}
			
		} );
	});

	wp.customize( 'sunset_header_add_border', function( value ) {
		value.bind( function( newVal ) {
			let sunset_header_border_color = wp.customize.value('sunset_header_border_color')();
			let sunset_header_border_height = wp.customize.value('sunset_header_border_height')();
			if ( newVal ) {
				$('.site-header .header').css('border-bottom', `${sunset_header_border_height}px solid ${sunset_header_border_color}`);
			} else {
				$('.site-header .header').css('border-bottom', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_header_border_color', function( value ) {
		value.bind( function( newVal ) {
			let sunset_header_add_border = wp.customize.value('sunset_header_add_border')();
			let sunset_header_border_height = wp.customize.value('sunset_header_border_height')();
			if ( sunset_header_add_border ) {
				$('.site-header .header').css('border-bottom', `${sunset_header_border_height}px solid ${newVal}`);
			} else {
				$('.site-header .header').css('border-bottom', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_header_mobile_menu_background', function( value ) {
		value.bind( function( newVal ) {
			let svgColor = newVal.replace("#", "%23");
			$('.fullscreen-menu-block').css('background-color', newVal);
			$(`<style>
			.fullscreen-menu-block::after { 
				background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2.17 35.28\" preserveAspectRatio=\"none\"><path d=\"M1.67 0c-.55 3.07.41 9.27 0 16.14-.4 6.88-.58 13.75.1 19.14h.4V0z\" fill=\"${svgColor}\"/><path d=\"M1.16 0c-.8 3.17.4 7.29.56 10.04C1.89 12.8.25 19.3.42 22.71c.16 3.43.84 4.65.86 7.05.03 2.4-.88 5.52-.88 5.52h1.77V0z\" opacity=\".5\" fill=\"${svgColor}\"/><path d=\"M.31 0c.84 2.56.3 7.68.43 11.79.12 4.1.61 6.86.28 9.58-.33 2.73-1.18 5.61-1 8.61.19 3 .82 4.73.84 5.3h1.2V0z\" opacity=\".5\" fill=\"${svgColor}\"/></svg>');
			}
			</style>`).appendTo('head');
		} );
	});

	wp.customize( 'sunset_header_mobile_menu_color', function( value ) {
		value.bind( function( newVal ) {
			$('.main-nav.main-nav--fullscreen .main-nav-menu > li:not(.current-menu-item) > a').css('--mobile-menu-color', newVal);
			$('.main-nav.main-nav--fullscreen .main-nav-menu > li:not(.current-menu-item) > .menu-item-arrow').css('--mobile-menu-color', newVal);
			$('.burger').css('--mobile-menu-color', newVal);
		} );
	});

	wp.customize( 'sunset_header_mobile_menu_hover_color', function( value ) {
		value.bind( function( newVal ) {
			$('.main-nav--fullscreen .main-nav-menu > li.current-menu-item > a').css('--mobile-menu-hover-color', newVal);
			$('.main-nav--fullscreen .main-nav-menu > li:not(.current-menu-item) > a').css('--mobile-menu-hover-color', newVal);
			$('.main-nav--fullscreen .main-nav-menu > li:not(.current-menu-item) > .menu-item-arrow').css('--mobile-menu-hover-color', newVal);
			$('.burger').css('--mobile-menu-color', newVal);
			$(`<style>
			.main-nav--fullscreen .main-nav-menu--underlined > li > a:before{border-color: ${newVal};}
			</style>`).appendTo('head');
		} );
	});

	wp.customize( 'sunset_header_border_height', function( value ) {
		value.bind( function( newVal ) {
			let sunset_header_add_border = wp.customize.value('sunset_header_add_border')();
			let sunset_header_border_color = wp.customize.value('sunset_header_border_color')();
			if ( sunset_header_add_border ) {
				$('.site-header').css('border-bottom', `${newVal}px solid ${sunset_header_border_color}`);
			} else {
				$('.site-header').css('border-bottom', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_topbar_background_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$('.topbar').css('background-color', newVal);
			} else {
				$('.topbar').css('background-color', 'transparent');
			}
			
		} );
	});

	wp.customize( 'sunset_topbar_color', function( value ) {
		value.bind( function( newVal ) {
			$('.topbar').css('color', newVal);
		} );
	});

	wp.customize( 'sunset_topbar_add_border', function( value ) {
		value.bind( function( newVal ) {
			let sunset_topbar_border_color = wp.customize.value('sunset_topbar_border_color')();
			let sunset_topbar_border_height = wp.customize.value('sunset_topbar_border_height')();
			if ( newVal ) {
				$('.site-header .topbar').css('border-bottom', `${sunset_topbar_border_height}px solid ${sunset_topbar_border_color}`);
			} else {
				$('.site-header .topbar').css('border-bottom', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_topbar_border_height', function( value ) {
		value.bind( function( newVal ) {
			let sunset_topbar_add_border = wp.customize.value('sunset_topbar_add_border')();
			let sunset_topbar_border_color = wp.customize.value('sunset_topbar_border_color')();
			if ( sunset_topbar_add_border ) {
				$('.site-header .topbar').css('border-bottom', `${newVal}px solid ${sunset_topbar_border_color}`);
			} else {
				$('.site-header .topbar').css('border-bottom', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_topbar_border_color', function( value ) {
		value.bind( function( newVal ) {
			let sunset_topbar_add_border = wp.customize.value('sunset_topbar_add_border')();
			let sunset_topbar_border_height = wp.customize.value('sunset_topbar_border_height')();
			if ( sunset_topbar_add_border ) {
				$('.site-header .topbar').css('border-bottom', `${sunset_topbar_border_height}px solid ${newVal}`);
			} else {
				$('.site-header .topbar').css('border-bottom', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_footer_background_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$('.site-footer').css('background-color', newVal);
			} else {
				$('.site-footer').css('background-color', 'transparent');
			}
			
		} );
	});

	wp.customize( 'sunset_footer_color', function( value ) {
		value.bind( function( newVal ) {
			$('.site-footer').css('color', newVal);
		} );
	});

	wp.customize( 'sunset_footer_widget_title_color', function( value ) {
		value.bind( function( newVal ) {
			$('.footer-widget__title').css('color', newVal);
		} );
	});

	wp.customize( 'sunset_footer_add_border', function( value ) {
		value.bind( function( newVal ) {
			let sunset_footer_border_color = wp.customize.value('sunset_footer_border_color')();
			let sunset_footer_border_height = wp.customize.value('sunset_footer_border_height')();
			if ( newVal ) {
				$('.site-footer').css('border-top', `${sunset_footer_border_height}px solid ${sunset_footer_border_color}`);
			} else {
				$('.site-footer').css('border-top', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_footer_border_height', function( value ) {
		value.bind( function( newVal ) {
			let sunset_footer_add_border = wp.customize.value('sunset_footer_add_border')();
			let sunset_footer_border_color = wp.customize.value('sunset_footer_border_color')();
			if ( sunset_footer_add_border ) {
				$('.site-footer').css('border-top', `${newVal}px solid ${sunset_footer_border_color}`);
			} else {
				$('.site-footer').css('border-top', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_footer_border_color', function( value ) {
		value.bind( function( newVal ) {
			let sunset_footer_add_border = wp.customize.value('sunset_footer_add_border')();
			let sunset_footer_border_height = wp.customize.value('sunset_footer_border_height')();
			if ( sunset_footer_add_border ) {
				$('.site-footer').css('border-top', `${sunset_footer_border_height}px solid ${newVal}`);
			} else {
				$('.site-footer').css('border-top', '0');
			}
			
		} );
	});

	
	wp.customize( 'sunset_copyright_add_border', function( value ) {
		value.bind( function( newVal ) {
			let sunset_copyright_border_color = wp.customize.value('sunset_copyright_border_color')();
			let sunset_copyright_border_height = wp.customize.value('sunset_copyright_border_height')();
			if ( newVal ) {
				$('.site-copyright').css('border-top', `${sunset_copyright_border_height}px solid ${sunset_copyright_border_color}`);
			} else {
				$('.site-copyright').css('border-top', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_copyright_border_height', function( value ) {
		value.bind( function( newVal ) {
			let sunset_copyright_add_border = wp.customize.value('sunset_copyright_add_border')();
			let sunset_copyright_border_color = wp.customize.value('sunset_copyright_border_color')();
			if ( sunset_copyright_add_border ) {
				$('.site-copyright').css('border-top', `${newVal}px solid ${sunset_copyright_border_color}`);
			} else {
				$('.site-copyright').css('border-top', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_copyright_border_color', function( value ) {
		value.bind( function( newVal ) {
			let sunset_copyright_add_border = wp.customize.value('sunset_copyright_add_border')();
			let sunset_copyright_border_height = wp.customize.value('sunset_copyright_border_height')();
			if ( sunset_copyright_add_border ) {
				$('.site-copyright').css('border-top', `${sunset_copyright_border_height}px solid ${newVal}`);
			} else {
				$('.site-copyright').css('border-top', '0');
			}
			
		} );
	});

	wp.customize( 'sunset_copyright_background_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$('.site-copyright').css('background-color', newVal);
			} else {
				$('.site-copyright').css('background-color', 'transparent');
			}
			
		} );
	});

	wp.customize( 'sunset_copyright_color', function( value ) {
		value.bind( function( newVal ) {
			$('.site-copyright').css('color', newVal);
			$('.copyright-widget__title').css('color', newVal);
		} );
	});

	wp.customize( 'sunset_content_primary_color', function( value ) {
		value.bind( function( newVal ) {
			$('body').css('color', newVal);
		} );
	});

	wp.customize( 'sunset_content_bg_color', function( value ) {
		value.bind( function( newVal ) {
			$('body').css('background-color', newVal);
			document.documentElement.style.setProperty('--bg-color', newVal);
		} );
	});

	wp.customize( 'sunset_content_sidebars_bg_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$('.sidebar .sidebar__inner').css('background-color', newVal);
				document.documentElement.style.setProperty('--bg-sidebar-color', newVal);
			} else {
				$('.sidebar .sidebar__inner').css('background-color', 'transparent');
				document.documentElement.style.setProperty('--bg-sidebar-color', 'transparent');
			}
			
		} );
	});

	wp.customize( 'sunset_content_link_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--link-color', newVal);
			}
		} );
	});

	wp.customize( 'sunset_content_link_hover_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--link-hover-color', newVal);
			}
		} );
	});

	for (let i = 1; i <= 6; i += 1) {
		wp.customize( `sunset_content_h${i}_color`, function( value ) {
			value.bind( function( newVal ) {
				if (newVal !== '') {
					$(`h${i}`).css('color', newVal);
					document.documentElement.style.setProperty(`--h${i}-color`, newVal);
				} else {
					$(`h${i}`).css('color', 'inherit');
					document.documentElement.style.setProperty(`--h${i}-color`, 'inherit');
				}
			} );
		});
	}

	wp.customize( `sunset_content_widget_title_color`, function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--widget-title-color', newVal);
			} else {
				document.documentElement.style.setProperty('--widget-title-color', 'inherit');
			}
		} );
	});

	wp.customize( `sunset_content_secondary_color`, function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--secondary-color', newVal);
			} else {
				document.documentElement.style.setProperty('--secondary-color', 'inherit');
			}
		} );
	});
	

	let buttonElements = 'button, input[type="submit"], input[type="reset"], input[type="button"]';

	wp.customize( 'sunset_buttons_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--button-color', newVal);
			} else {
				document.documentElement.style.setProperty('--button-color', 'transparent');
			}
		} );
	});

	wp.customize( 'sunset_buttons_hover_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--button-hover-color', newVal);
			} else {
				document.documentElement.style.setProperty('--button-hover-color', 'transparent');
			}
		} );
	});

	wp.customize( 'sunset_buttons_text_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--button-text-color', newVal);
			} else {
				document.documentElement.style.setProperty('--button-text-color', 'transparent');
			}
		} );
	});

	wp.customize( 'sunset_buttons_hover_text_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				document.documentElement.style.setProperty('--button-hover-text-color', newVal);
			} else {
				document.documentElement.style.setProperty('--button-hover-text-color', 'transparent');
			}
		} );
	});

	wp.customize( 'sunset_buttons_border_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$(buttonElements).css('border-color', newVal);
			} else {
				$(buttonElements).css('border-color', 'transparent');
			}
		} );
	});

	let inputElements = 'input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="search"], input[type="password"], textarea, select';

	wp.customize( 'sunset_inputs_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$(inputElements).css('background-color', newVal);
			} else {
				$(inputElements).css('background-color', 'transparent');
			}
		} );
	});

	wp.customize( 'sunset_inputs_text_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$(inputElements).css('color', newVal);
			} else {
				$(inputElements).css('color', 'inherit');
			}
		} );
	});

	wp.customize( 'sunset_inputs_border_color', function( value ) {
		value.bind( function( newVal ) {
			if (newVal !== '') {
				$(inputElements).css('border-color', newVal);
			} else {
				$(inputElements).css('border-color', 'transparent');
			}
		} );
	});

	wp.customize( 'sunset_post_related_title_text', function( value ) {
		value.bind( function( newVal ) {
			$('.related-posts .related-posts__title').text(newVal);
		} );
	});
	

	// https://iandunn.name/2019/11/21/sending-custom-data-between-wordpress-customizer-preview-and-controls-panes/
	const messenger = new wp.customize.Messenger( {
		channel      : 'sunset-theme',
		targetWindow : window.parent,
		url          : wp.customize.settings.url.allowed[ 0 ],
	} );

	// Handle messages that are received.
	messenger.bind( 'sunset_customizer_primary_font_weight_updated', event => {
		$('body').css('font-weight', event.weight);
		$('body').css('font-style', event.style);
	} );

	for (let i = 1; i <= 6; i += 1) {
		// Handle messages that are received.
		messenger.bind( `sunset_customizer_h${i}_font_weight_updated`, event => {
			$(`h${i}`).css('font-weight', event.weight);
			$(`h${i}`).css('font-style', event.style);
		} );
	}

});