/**
 * File index.js
 *
 * Theme Customizer enhancements for a better user experience.
 */

import './controls.js';

/**
 * Customizer control active callback function JS
 *
 * @param active_setting
 * @param settings
 * @param compare
 */
const zenvy_active_callback = ( active_setting, settings, compare ) => {
	wp.customize.bind( 'ready', function() {
		wp.customize( active_setting, function( value ) {
			const controlSelectors = function( control ) {
				const active = function() {
					const objVal = value.get();

					if ( ( typeof objVal === 'string' || objVal instanceof String ) && ( jQuery.inArray( objVal, compare ) !== -1 ) ) {
						control.container.removeClass( 'hidden' );
					} else if ( ( objVal.desktop !== undefined && ( jQuery.inArray( objVal.desktop, compare ) !== -1 ) ) || ( objVal.tablet !== undefined && ( jQuery.inArray( objVal.tablet, compare ) !== -1 ) ) || ( objVal.mobile !== undefined && ( jQuery.inArray( objVal.mobile, compare ) !== -1 ) ) ) {
						control.container.removeClass( 'hidden' );
					} else {
						control.container.addClass( 'hidden' );
					}
				};

				// Set initial active state.
				active();

				// Update activate state whenever the setting is changed.
				value.bind( active );
			};

			// Trigger Selected Controls
			jQuery.each( settings, function( index, id ) {
				wp.customize.control( id, controlSelectors );
			} );
		} );
	} );
};

/**
 * Customizer control active callback function JS for empty or black value
 *
 * @param active_setting
 * @param settings
 */
const zenvy_active_callback_blank = ( active_setting, settings ) => {
	wp.customize.bind( 'ready', function() {
		wp.customize( active_setting, function( value ) {
			const controlSelectors = function( control ) {
				const active = function() {
					const val = value.get();

					if ( val && val !== '' ) {
						control.container.removeClass( 'hidden' );
					} else {
						control.container.addClass( 'hidden' );
					}
				};

				// Set initial active state.
				active();

				// Update activate state whenever the setting is changed.
				value.bind( active );
			};

			// Trigger Selected Controls
			jQuery.each( settings, function( index, id ) {
				wp.customize.control( id, controlSelectors );
			} );
		} );
	} );
};

/**
 * Customizer inline css
 *
 * @param control       string
 * @param inheritColor  object
 * @param inheritColors
 */
const zenvy_inline_css = ( control, inheritColors ) => {
	wp.customize( control, function( value ) {
		value.bind( function( objectVal ) {
			if ( objectVal !== undefined ) {
				// Assign variables
				let properties = '',
					output = '';

				// remove inline style fist
				jQuery( 'style#' + control ).remove();

				// Initial objectVal
				Object.keys( objectVal ).forEach( function( key, index ) {
					if ( inheritColors[ key ] !== undefined ) {
						properties += inheritColors[ key ] + ':' + objectVal[ key ] + ';';
					}
				} );

				// Concat properties in root
				output += ( properties !== '' ) ? ':root {' + properties + '}' : '';
				// Concat and append new <style>.
				jQuery( 'head' ).append(
					'<style id="' + control + '">' + output + '</style>',
				);
			}
		} );
	} );
};

( function( $, api ) {
	'use strict';

	// Blog Posts Layout
	zenvy_active_callback(
		'zenvy_blog_posts_layout',
		[
			'zenvy_blog_posts_col_img_overlay_color',
		],
		[ 'layout-4' ],
	);

	

	// Header : Custom Header Height
	zenvy_active_callback(
		'zenvy_header_height_type',
		[
			'zenvy_header_custom_height',
		],
		[ 'custom' ],
	);

	// Site Identify -> site title
	zenvy_active_callback(
		'zenvy_header_site_title_enable',
		[
			'blogname',
			'zenvy_header_site_title_typo',
			'zenvy_header_site_identify_note_two',
		],
		[ 'true' ],
	);
	// Site Identify -> tagline
	zenvy_active_callback(
		'zenvy_header_site_tagline_enable',
		[
			'blogdescription',
			'zenvy_header_site_tagline_typo',
			'zenvy_header_site_identify_note_two',
		],
		[ 'true' ],
	);

	/**
	 * Color Inherit Patterns
	 */
	// Accent Colors
	zenvy_inline_css(
		'zenvy_accent_color',
		{ color_1: '--color-primary', color_2: '--color-secondary', color_3: '--color-tertiary' },
	);
	// Heading H1-H6 Color
	zenvy_inline_css(
		'zenvy_heading_color',
		{ color_1: '--color-heading' },
	);
	// Text Color
	zenvy_inline_css(
		'zenvy_text_color',
		{ color_1: '--color-text', color_2: '--color-text-light' },
	);
	// Link Color
	zenvy_inline_css(
		'zenvy_link_color',
		{ color_1: '--color-link', color_2: '--color-link-hover' },
	);
	// Border & Shadow Color
	zenvy_inline_css(
		'zenvy_border_shadow_color',
		{ color_1: '--color-border', color_2: '--color-box-shadow' },
	);
	// Background Color
	zenvy_inline_css(
		'zenvy_background_color',
		{ color_1: '--color-bg', color_2: '--color-bg-light', color_3: '--color-bg-dark' },
	);

	// Bind customizer focus target link
	api.bind( 'ready', function() {
		$( '.customizer-focus' ).on( 'click', function( e ) {
			e.preventDefault();

			const type 	= $( this ).data( 'type' ),
				id		= $( this ).data( 'id' );

			if ( ! id || ! type ) {
				return;
			}
			api[ type ]( id, function( instance ) {
				instance.deferred.embedded.done( function() {
					api.previewer.deferred.active.done( function() {
						instance.focus();
					} );
				} );
			} );
		} );
	} );
}( jQuery, wp.customize ) );
