<?php
/**
 * Pawfect Responsive Range Control
 * Based on Shopire's working responsive range implementation
 *
 * @package Pawfect
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

if ( ! class_exists( 'WP_Customize_Control' ) ) {
	return;
}

/**
 * Pawfect Responsive Range Control Class
 */
class Pawfect_Responsive_Range_Control extends WP_Customize_Control {

	/**
	 * Control type
	 *
	 * @var string
	 */
	public $type = 'pawfect-responsive-range';

	/**
	 * Flag that enables media queries
	 *
	 * @var bool
	 */
	public $media_query = true;

	/**
	 * Settings for range inputs.
	 *
	 * @var array|mixed
	 */
	public $input_attr = array();

	/**
	 * Suffix for the range value
	 *
	 * @var string
	 */
	public $suffix = '';

	/**
	 * Enqueue scripts and styles.
	 */
	public function enqueue() {
		// Main scripts.
		wp_enqueue_script(
			'pawfect-responsive-range-control',
			PAWFECT_THEME_URL . '/inc/customizer/assets/js/responsive-range-control.js',
			array(
				'jquery',
				'customize-base',
				'jquery-ui-button',
				'jquery-ui-sortable',
			),
			PAWFECT_THEME_VERSION,
			true
		);

		wp_enqueue_style(
			'pawfect-responsive-range-control',
			PAWFECT_THEME_URL . '/inc/customizer/assets/css/responsive-range-control.css',
			array(),
			PAWFECT_THEME_VERSION
		);
	}

	/**
	 * Constructor.
	 *
	 * @param WP_Customize_Manager $manager Customize manager.
	 * @param string               $id Control id.
	 * @param array                $args Control arguments.
	 */
	public function __construct( $manager, $id, $args = array() ) {
		parent::__construct( $manager, $id, $args );

		if ( ! empty( $args['media_query'] ) ) {
			$this->media_query = (bool) $args['media_query'];
		}

		if ( ! empty( $args['input_attr'] ) ) {
			$this->input_attr = $args['input_attr'];
		}

		if ( ! empty( $args['suffix'] ) ) {
			$this->suffix = $args['suffix'];
		}
	}

	/**
	 * Handles input value.
	 */
	public function json() {
		$json = parent::json();

		$json['value'] = $this->value();

		$json['default_value'] = ! empty( $this->setting->default ) ? $this->setting->default : 0;

		// Parse default values to get device-specific defaults
		$default_values = array(
			'desktop' => 0,
			'tablet' => 0,
			'mobile' => 0
		);

		if ( $this->is_json( $json['default_value'] ) ) {
			$decoded_defaults = json_decode( $json['default_value'], true );
			if ( is_array( $decoded_defaults ) ) {
				$default_values['desktop'] = isset( $decoded_defaults['desktop'] ) ? $decoded_defaults['desktop'] : 0;
				$default_values['tablet'] = isset( $decoded_defaults['tablet'] ) ? $decoded_defaults['tablet'] : 0;
				$default_values['mobile'] = isset( $decoded_defaults['mobile'] ) ? $decoded_defaults['mobile'] : 0;
			}
		}

		$json['desktop_default'] = $default_values['desktop'];
		$json['tablet_default'] = $default_values['tablet'];
		$json['mobile_default'] = $default_values['mobile'];

		$json['desktop_value'] = ! $this->is_json( $json['value'] ) ? $json['value'] : $default_values['desktop'];
		$json['tablet_value']  = $default_values['tablet'];
		$json['mobile_value']  = $default_values['mobile'];

		if ( $this->is_json( $json['value'] ) ) {
			$decoded_value         = json_decode( $json['value'], true );
			$json['desktop_value'] = isset( $decoded_value['desktop'] ) ? $decoded_value['desktop'] : $default_values['desktop'];
			$json['tablet_value']  = isset( $decoded_value['tablet'] ) ? $decoded_value['tablet'] : $default_values['tablet'];
			$json['mobile_value']  = isset( $decoded_value['mobile'] ) ? $decoded_value['mobile'] : $default_values['mobile'];
		} else {
			$json['desktop_value'] = $json['value'];
		}

		$json['media_query'] = $this->media_query;
		$json['link']        = $this->get_link();
		$json['suffix']      = $this->suffix;

		if ( ! $this->contains_array( $this->input_attr ) ) {
			$json['min']  = ! empty( $this->input_attr['min'] ) ? $this->input_attr['min'] : 0;
			$json['max']  = ! empty( $this->input_attr['max'] ) ? $this->input_attr['max'] : 100;
			$json['step'] = ! empty( $this->input_attr['step'] ) ? $this->input_attr['step'] : 1;
		} else {
			foreach ( $this->input_attr as $device => $value ) {
				$json[ $device ] = $value;
			}
		}

		return $json;
	}

	/**
	 * Check if an array contains another array.
	 *
	 * @param array $array Array to check.
	 */
	private function contains_array( $array ) {
		foreach ( $array as $value ) {
			if ( is_array( $value ) ) {
				return true;
			}
		}
		return false;
	}

	/**
	 * Check if a string is in json format
	 *
	 * @param  string $string Input.
	 */
	public function is_json( $string ) {
		return is_string( $string ) && is_array( json_decode( $string, true ) ) ? true : false;
	}

	/**
	 * Render the control's content.
	 *
	 * @access public
	 */
	protected function content_template() {
		?>
		<# if ( data.label ) { #>
			<span class="customize-control-title">
				<span>{{{ data.label }}}</span>
			</span>
			<# if ( data.media_query ) { #>
				<ul class="pawfect-responsive-switchers">
					<li class="desktop">
						<button type="button" class="preview-desktop active" data-device="desktop">
							<i class="dashicons dashicons-desktop"></i>
						</button>
					</li>
					<li class="tablet">
						<button type="button" class="preview-tablet" data-device="tablet">
							<i class="dashicons dashicons-tablet"></i>
						</button>
					</li>
					<li class="mobile">
						<button type="button" class="preview-mobile" data-device="mobile">
							<i class="dashicons dashicons-smartphone"></i>
						</button>
					</li>
				</ul>
			<# } #>
		<# }
		var min, max, step, default_value;
		if( data.min ){
			min = data.min;
		}
		if( data.max ){
			max = data.max;
		}
		if( data.step ){
			step = data.step;
		}
		if( data.default_value ){
			default_value = data.default_value;
		}

		if( data.desktop ){
			if ( data.desktop.min ){
				min = data.desktop.min;
			}
			if ( data.desktop.max ){
				max = data.desktop.max;
			}
			if ( data.desktop.step ){
				step = data.desktop.step;
			}
			if ( data.desktop.default_value ){
				default_value = data.desktop.default_value;
			} else if ( data.desktop_default ) {
				default_value = data.desktop_default;
			}
		}
		if( data.desktop_value ){
			value = data.desktop_value;
		} else {
			if( default_value ) {
				value = default_value;
			}
		}
				#>
		<div class="pawfect-range-slider <# if ( data.media_query ) { #>has-media-queries<# }#>">
			<div class="desktop-range active">
				<input type="range" class="pawfect-range-slider__range" title="{{{data.label}}}" min="{{min}}" max="{{max}}" step="{{step}}" data-query="desktop" data-default="{{ data.desktop_default }}" value="{{ value }}">
				<input type="number" class="pawfect-range-slider-value" title="{{{data.label}}}" min="{{min}}" max="{{max}}" step="{{step}}" value="{{ value }}">
				<# if ( data.suffix ) { #>
					<span class="pawfect-range-suffix">{{{ data.suffix }}}</span>
				<# } #>
				<span class="pawfect-range-reset-slider"><span class="dashicons dashicons-image-rotate"></span></span>
			</div>
			<# if ( data.media_query ) {

				if( data.tablet ){
					if ( data.tablet.min ){
						min = data.tablet.min;
					}
					if ( data.tablet.max ){
						max = data.tablet.max;
					}
					if ( data.tablet.step ){
						step = data.tablet.step;
					}
					if ( data.tablet.default_value ){
						default_value = data.tablet.default_value;
					}
				}
				if( data.tablet_value ){
					value = data.tablet_value;
				} else {
					if( default_value ) {
						value = default_value;
					}
				}

				#>
				<div class="tablet-range">
					<input type="range" class="pawfect-range-slider__range" title="{{{data.label}}}" min="{{min}}" max="{{max}}" step="{{step}}" data-query="tablet" data-default="{{ data.tablet_default }}"  value="{{ value }}">
					<input type="number" class="pawfect-range-slider-value" title="{{{data.label}}}" min="{{min}}" max="{{max}}" step="{{step}}" value="{{ value }}">
					<# if ( data.suffix ) { #>
						<span class="pawfect-range-suffix">{{{ data.suffix }}}</span>
					<# } #>
					<span class="pawfect-range-reset-slider"><span class="dashicons dashicons-image-rotate"></span></span>
				</div>

				<# if( data.mobile ){
					if ( data.mobile.min ){
						min = data.mobile.min;
					}
					if ( data.mobile.max ){
						max = data.mobile.max;
					}
					if ( data.mobile.step ){
						step = data.mobile.step;
					}
					if ( data.mobile.default_value ){
						default_value = data.mobile.default_value;
					}

					if( data.mobile_value ){
						value = data.mobile_value;
					} else {
						if( default_value ) {
							value = default_value;
						}
					}
				} #>
				<div class="mobile-range">
					<input type="range" class="pawfect-range-slider__range" title="{{{data.label}}}" min="{{min}}" max="{{max}}" step="{{step}}" data-query="mobile" data-default="{{ data.mobile_default }}" value="{{ value }}">
					<input type="number" class="pawfect-range-slider-value" title="{{{data.label}}}" min="{{min}}" max="{{max}}" step="{{step}}" value="{{{ value }}}">
					<# if ( data.suffix ) { #>
						<span class="pawfect-range-suffix">{{{ data.suffix }}}</span>
					<# } #>
					<span class="pawfect-range-reset-slider"><span class="dashicons dashicons-image-rotate"></span></span>
				</div>
			<# } #>
			<input type="hidden" class="pawfect-range-collector" title="{{{data.label}}}" value="{{ data.value }}" {{{ data.link }}} >
		</div>
		<?php
	}

	/**
	 * Sanitize values for range inputs.
	 *
	 * @param string $input Control input.
	 */
	public static function sanitize_responsive_range( $input ) {
		if ( self::is_json_static( $input ) ) {
			$range_value            = json_decode( $input, true );
			$range_value['desktop'] = ! empty( $range_value['desktop'] ) || $range_value['desktop'] === '0' ? floatval( $range_value['desktop'] ) : '';
			$range_value['tablet']  = ! empty( $range_value['tablet'] ) || $range_value['tablet'] === '0' ? floatval( $range_value['tablet'] ) : '';
			$range_value['mobile']  = ! empty( $range_value['mobile'] ) || $range_value['mobile'] === '0' ? floatval( $range_value['mobile'] ) : '';
			return json_encode( $range_value );
		}
		return floatval( $input );
	}

	/**
	 * Check if a string is in json format (static version)
	 *
	 * @param  string $string Input.
	 */
	public static function is_json_static( $string ) {
		return is_string( $string ) && is_array( json_decode( $string, true ) ) ? true : false;
	}
}
