/**
 * Range control in customizer
 */

/* global wp */
/* global jQuery */
wp.customize.controlConstructor[ 'range-value' ] = 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':
					var value = slider.val();
					var type = jQuery( input ).attr( 'type' );
					if ( type === 'text' ) { // inputBox
						if ( value >= 0 ) {
							value = '+' + value;
						}
					}
					input.val( value );
					break;
				case 'input':
					slider.val( input.val() );
					break;
				}
			}

			function updateValues( control ) {
				var collector = control.find( '.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( '.range-slider__range[data-query="desktop"]' ),
					tabletSelector = control.find( '.range-slider__range[data-query="tablet"]' ),
					mobileSelector = control.find( '.range-slider__range[data-query="mobile"]' ),
					desktopValue, tabletValue, mobileValue;

				if ( mobileSelector.exists() ) {
					mobileValue = mobileSelector.val();
					if ( mobileValue !== 'undefined' && mobileValue !== '' ) {
						values.mobile = mobileValue;
					}
				}

				if ( tabletSelector.exists() ) {
					tabletValue = tabletSelector.val();
					if ( tabletValue !== 'undefined' && tabletValue !== '' ) {
						values.tablet = tabletValue;
					}
				}

				if ( desktopSelector.exists() ) {
					desktopValue = desktopSelector.val();
					if ( desktopValue !== 'undefined' && desktopValue !== '' ) {
						values.desktop = desktopValue;
					}
				}

				return values;
			}


			theme_controls.on(
				'input', '.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 change input', '.range-slider-value', function () {
					var control = jQuery( this ).parent().parent();
					var slider = jQuery( this ).prev();
					var input = jQuery( this );
					syncRangeText( slider, input, 'input' );
					updateValues( control );
				}
			);

			// Clamp control values between min and max.
			theme_controls.on(
				'blur', '.range-slider-value', function () {
					var slider = jQuery( this ).prev();
					var min = parseInt( slider.attr( 'min' ) );
					var max = parseInt( slider.attr( 'max' ) );
					var input = jQuery( this );
					var value = parseInt( jQuery( this ).val() );

					if ( value < min ) {
						input.val( min );
						return false;
					} else if ( value > max ) {
						input.val( max );
						return false;
					}
				}
			);

			theme_controls.on(
				'click', '.range-reset-slider', function ( event ) {
					event.preventDefault();
					var input = jQuery( this ).prev();
					var slider = input.prev();
					var control = jQuery( this ).parent().parent();
					var defaultValue = slider.data( 'default' );
					var type = jQuery( input ).attr( 'type' );
					if ( type === 'text' ) { // inputBox
						defaultValue = '+0';
					}
					input.val( defaultValue );
					slider.val( defaultValue );
					updateValues( control );
				}
			);

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

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