/* Pawfect Responsive Range Control */
wp.customize.controlConstructor['pawfect-responsive-range'] = wp.customize.Control.extend({

	ready: function () {
		'use strict';

		jQuery.fn.exists = function () { return this.length > 0; };
		var control = this,
			changeAction;
		var theme_controls = jQuery('#customize-theme-controls');

		function syncRangeText(slider, input, from) {
			switch (from) {
				case 'slider':
					input.val(slider.val());
					break;
				case 'input':
					slider.val(input.val());
					break;
			}
		}

		function updateValues(control) {
			var collector = control.find('.pawfect-range-collector');
			var values = getSliderValues(control);
			var have_queries = Object.keys(values).length > 1;

			if (have_queries) {
				collector.val(JSON.stringify(values));
			} else {
				collector.val(values.desktop);
			}
			collector.trigger('change');

		}

		function getSliderValues(control) {
			var values = {};
			var desktopSelector = control.find('.pawfect-range-slider__range[data-query="desktop"]'),
				tabletSelector = control.find('.pawfect-range-slider__range[data-query="tablet"]'),
				mobileSelector = control.find('.pawfect-range-slider__range[data-query="mobile"]'),
				desktopValue, tabletValue, mobileValue;

			// Always collect desktop value
			if (desktopSelector.exists()) {
				desktopValue = desktopSelector.val();
				if (desktopValue !== 'undefined' && desktopValue !== '' && desktopValue !== null) {
					values.desktop = desktopValue;
				}
			}

			// Always collect tablet value if tablet selector exists
			if (tabletSelector.exists()) {
				tabletValue = tabletSelector.val();
				if (tabletValue !== 'undefined' && tabletValue !== '' && tabletValue !== null) {
					values.tablet = tabletValue;
				}
			}

			// Always collect mobile value if mobile selector exists
			if (mobileSelector.exists()) {
				mobileValue = mobileSelector.val();
				if (mobileValue !== 'undefined' && mobileValue !== '' && mobileValue !== null) {
					values.mobile = mobileValue;
				}
			}

			return values;
		}

		function responsiveSwitcher() {
			// Responsive switchers
			jQuery('.customize-control .pawfect-responsive-switchers button').on('click', function (event) {
				event.preventDefault();
				// Set up variables
				var $devices = jQuery('.pawfect-responsive-switchers'),
					$device = jQuery(event.currentTarget).data('device'),
					$body = jQuery('.wp-full-overlay'),
					$footer_devices = jQuery('.wp-full-overlay-footer .devices');

				// Button class
				$devices.find('button').removeClass('active');
				$devices.find('button.preview-' + $device).addClass('active');

				var control = jQuery('.pawfect-range-slider.has-media-queries');
				control.find('.desktop-range').removeClass('active');
				control.find('.tablet-range').removeClass('active');
				control.find('.mobile-range').removeClass('active');
				control.find('.' + $device + '-range').addClass('active');

				// Wrapper class
				$body.removeClass('preview-desktop preview-tablet preview-mobile').addClass('preview-' + $device);

				// Panel footer buttons
				$footer_devices.find('button').removeClass('active').attr('aria-pressed', false);
				$footer_devices.find('button.preview-' + $device).addClass('active').attr('aria-pressed', true);

			});

			jQuery('#customize-footer-actions .devices button').on('click', function (event) {
				event.preventDefault();
				var device = jQuery(this).data('device');
				var queries = jQuery('.pawfect-responsive-switchers');

				queries.find('button').removeClass('active');
				queries.find('button.preview-' + device).addClass('active');

				var control = jQuery('.pawfect-range-slider.has-media-queries');
				control.find('.desktop-range').removeClass('active');
				control.find('.tablet-range').removeClass('active');
				control.find('.mobile-range').removeClass('active');
				control.find('.' + device + '-range').addClass('active');
			});
		}

		theme_controls.off('click', '.preview-desktop.active').on('click', '.preview-desktop.active', function () {
			jQuery(this).parent().parent().toggleClass('pawfect-responsive-switchers-open');
		});

		theme_controls.on('input', '.pawfect-range-slider__range', function () {
			var slider = jQuery(this);
			var input = jQuery(this).next();
			var control = jQuery(this).parent().parent();
			syncRangeText(slider, input, 'slider');
			updateValues(control);
		});

		theme_controls.on('keyup', '.pawfect-range-slider-value', function () {
			var control = jQuery(this).parent().parent();
			updateValues(control);
		});
		theme_controls.on('keydown', '.pawfect-range-slider-value', function () {
			var slider = jQuery(this).prev();
			var input = jQuery(this);
			syncRangeText(slider, input, 'input');
		});

		theme_controls.on('click', '.pawfect-range-reset-slider', function (event) {
			event.preventDefault();

			// Get the parent container (desktop-range, tablet-range, or mobile-range)
			var resetButton = jQuery(this);
			var deviceContainer = resetButton.parent();

			// Find the specific elements within this device container
			var slider = deviceContainer.find('.pawfect-range-slider__range');
			var numberInput = deviceContainer.find('.pawfect-range-slider-value');
			var control = resetButton.closest('.pawfect-range-slider');
			var collector = control.find('.pawfect-range-collector');

			// Get default value from the slider
			var defaultValue = slider.data('default');

			if (slider.length && numberInput.length && defaultValue !== undefined && defaultValue !== null && defaultValue !== '') {
				// Update values - Shopire style (simple assignment)
				numberInput.val(defaultValue);
				slider.val(defaultValue);

				// CRITICAL: Ensure all other device sliders have values too
				// This is needed for proper JSON construction in updateValues()
				var allSliders = control.find('.pawfect-range-slider__range');
				allSliders.each(function () {
					var currentSlider = jQuery(this);
					var currentValue = currentSlider.val();
					var currentDefault = currentSlider.data('default');

					// If slider has no value or empty value, set it to its default
					if (!currentValue || currentValue === '' || currentValue === 'undefined') {
						if (currentDefault && currentDefault !== '' && currentDefault !== 'undefined') {
							currentSlider.val(currentDefault);
							// Also update the corresponding number input
							var correspondingInput = currentSlider.next('.pawfect-range-slider-value');
							if (correspondingInput.length) {
								correspondingInput.val(currentDefault);
							}
						}
					}
				});


				// Update the control values
				updateValues(control);

			} else {
			}
		});

		responsiveSwitcher();

		if ('postMessage' === control.setting.transport) {
			changeAction = 'mousemove change';
		} else {
			changeAction = 'change';
		}

		// Change the value
		this.container.on(changeAction, '.pawfect-range-collector', function () {
			control.setting.set(jQuery(this).val());
		});
	}
});
