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(
								".stax-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(".stax-customizer-tab")
				.on("click", function () {
					jQuery(this)
						.parent()
						.find(".stax-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();
					}
				}
			}
		},
	}
);
