/**
 * Script for the customizer tabs control interactions.
 *
 * @author    ThemeIsle
 */

/* global wp */

wp.customize.controlConstructor[
	'interface-tabs-custom'
] = wp.customize.Control.extend( {
	ready() {
		// Switch tab based on customizer partial edit links.
		wp.customize.previewer.bind( 'tab-previewer-edit', function ( data ) {
			jQuery( data.selector ).trigger( 'click' );
		} );

		wp.customize.previewer.bind( 'focus-control', function ( data ) {
			/**
			 * This timeout is here because in firefox this happens before customizer animation of changing panels.
			 * After it change panels with the input focused, the customizer was moved to right 12px. We have to make sure
			 * that the customizer animation of changing panels in customizer is done before focusing the input.
			 */
			setTimeout( function () {
				const control = wp.customize.control( data );
				if ( typeof control !== 'undefined' ) {
					wp.customize.control( data ).focus();
				}
			}, 100 );
		} );

		wp.customize.previewer.bind( 'focus-section', function ( data ) {
			/**
			 * This timeout is here because in firefox this happens before customizer animation of changing panels.
			 * After it change panels with the input focused, the customizer was moved to right 12px. We have to make sure
			 * that the customizer animation of changing panels in customizer is done before focusing the input.
			 */
			setTimeout( function () {
				wp.customize.section( data ).focus();
			}, 100 );
		} );

		wp.customize.previewer.bind( 'ready', function () {
			const parts = window.location.search.substr( 1 ).split( '&' );
			const $_GET = {};
			for ( let i = 0; i < parts.length; i++ ) {
				const temp = parts[ i ].split( '=' );
				$_GET[ decodeURIComponent( temp[ 0 ] ) ] = decodeURIComponent(
					temp[ 1 ]
				);
			}

			if (
				typeof $_GET[ 'autofocus[control]' ] !== 'undefined' &&
				$_GET[ 'autofocus[control]' ] !== ''
			) {
				jQuery( 'li[id^="customize-control-sidebars_widgets"]' ).on(
					'DOMNodeInserted',
					function () {
						jQuery(
							'.solace-customizer-tab > label.' +
								$_GET[ 'autofocus[control]' ]
						).trigger( 'click' );
					}
				);
			}
		} );

		const self = this;
		/**
		 * Run JS on load.
		 */
		wp.customize.bind( 'ready', function () {
			self.init();
			self.handleClick();
		} );
	},

	init() {
		const control = this;
		const section = control.section();
		control.hideAllControls( section );
		const tab = control.params.controls.general
			? 'general'
			: control.params.controls.layout
			? 'layout'
			: control.params.controls.style
			? 'style'
			: Object.keys( control.params.controls )[ 0 ];
		const controlsToShow = control.params.controls[ tab ];
		let allControls = [];
		for ( const controlName in controlsToShow ) {
			if ( controlsToShow.hasOwnProperty( controlName ) ) {
				if (
					jQuery.isEmptyObject( controlsToShow[ controlName ] ) ===
						false &&
					typeof wp.customize.control( controlName ) !== 'undefined'
				) {
					const subTabValue = wp.customize.control( controlName )
						.setting._value;
					allControls = allControls.concat(
						controlsToShow[ controlName ][ subTabValue ]
					);
				}
				allControls.push( controlName );
			}
		}
		control.showControls( allControls, section );
	},

	hideAllControls( section ) {
		const controls = wp.customize.section( section ).controls();
		const tabControl = this.id;
		for ( const i in controls ) {
			const controlId = controls[ i ].id;
			if ( controlId === 'widgets' ) {
				const sectionContainer = wp.customize.section( section )
					.container;
				jQuery( sectionContainer )
					.children( 'li[class*="widget"]' )
					.css( 'display', 'none' );
			} else if ( controlId !== tabControl ) {
				const selector = wp.customize.control( controlId ).selector;
				jQuery( selector ).hide();
			}
		}
	},

	handleClick() {
		const control = this;
		const section = control.section();
		const container = control.container;
		jQuery( container )
			.find( '.solace-customizer-tab' )
			.on( 'click', function () {
				jQuery( this )
					.parent()
					.find( '.solace-customizer-tab' )
					.removeClass( 'active' );
				jQuery( this ).addClass( 'active' );
				control.hideAllControls( section );
				const tab = jQuery( this ).data( 'tab' );
				const controlsToShow = control.params.controls[ tab ];
				let allControls = [];
				for ( const controlName in controlsToShow ) {
					if (
						jQuery.isEmptyObject(
							controlsToShow[ controlName ]
						) === false &&
						typeof wp.customize.control( controlName ) !==
							'undefined'
					) {
						const subTabValue = wp.customize.control( controlName )
							.setting._value;
						allControls = allControls.concat(
							controlsToShow[ controlName ][ subTabValue ]
						);
					}
					allControls.push( controlName );
				}
				control.showControls( allControls, section );
			} );
	},

	showControls( controls, section ) {
		for ( const i in controls ) {
			const controlName = controls[ i ];
			if (
				controlName === 'widgets' ||
				controlName.indexOf( 'sidebars_widgets' ) !== -1
			) {
				const sectionContainer = wp.customize.section( section )
					.container;
				jQuery( sectionContainer )
					.children( 'li[class*="widget"]' )
					.css( 'display', 'list-item' );
			} else if (
				typeof wp.customize.control( controlName ) !== 'undefined'
			) {
				const selector = wp.customize.control( controlName ).selector;
				jQuery( selector ).show();
			}
			const control = wp.customize.control( controlName );
			if ( typeof control !== 'undefined' ) {
				const status = wp.customize.control( controlName ).active();
				if ( status === true ) {
					jQuery(
						wp.customize.control( controlName ).selector
					).show();
				} else {
					jQuery(
						wp.customize.control( controlName ).selector
					).hide();
				}
			}
		}
	},
} );
