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

/* global wp */

wp.customize.controlConstructor['interface-tabs'] = 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(
								'.neve-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')
						.addClass('tab-hidden');
				} else if (controlId !== tabControl) {
					const selector = wp.customize.control(controlId).selector;
					jQuery(selector).addClass('tab-hidden');
				}
			}
		},

		handleClick() {
			const control = this;
			const section = control.section();
			const container = control.container;
			jQuery(container)
				.find('.neve-customizer-tab')
				.on('click', function () {
					jQuery(this)
						.parent()
						.find('.neve-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');

					return;
				}

				if (typeof wp.customize.control(controlName) !== 'undefined') {
					const selector = wp.customize.control(controlName).selector;
					jQuery(selector).removeClass('tab-hidden');
				}
			}
		},
	}
);
