<?php

// Exit if accessed directly.
if (!defined('ABSPATH')) {
	exit;
}

// Exit if WP_Customize_Control does not exsist.
if (!class_exists('WP_Customize_Control')) {
	return null;
}

class BrainAddons_Range extends WP_Customize_Control
{


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

	/**
	 * Enable media queries
	 *
	 * @var bool
	 */
	public $media_query = false;

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

	/**
	 * Step size.
	 *
	 * @var string
	 */
	public $step = '';

	/**
	 * Add/remove from fixed value flag
	 *
	 * @var bool
	 */
	public $sum_type = false;

	/**
	 * Range 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);
		$this->args_to_props($args);
	}

	/**
	 * Range Enqueue.
	 *
	 * @return void
	 */
	public function enqueue()
	{

		$css_path    = DIVI_TORQUE_LITE_URL . '/includes/deprecated/customizer/controls/css/';
		$js_path     = DIVI_TORQUE_LITE_URL . '/includes/deprecated/customizer/controls/js/';

		$file_prefix = (defined('DTQ_DEBUG') && true === constant('DTQ_DEBUG')) ? '' : '.min';

		wp_enqueue_script(
			'brainaddons-range-control',
			$js_path . 'range-control' . $file_prefix . '.js',
			array('customize-controls'),
			DIVI_TORQUE_LITE_VERSION,
			true
		);

		wp_enqueue_style(
			'brainaddons-range',
			$css_path . 'range' . $file_prefix . '.css',
			false,
			DIVI_TORQUE_LITE_VERSION
		);
	}

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

		$json['value']       = json_decode($this->value(), true);
		$json['link']        = $this->get_link();
		$json['media_query'] = $this->media_query;
		$json['step']        = $this->step;
		$json['sum_type']    = $this->sum_type;
		$json['inputAttr']   = $this->input_attr;

		return $json;
	}

	/**
	 * Render the title for the control.
	 */
	private function render_title()
	{
?>
		<# if ( data.label ) { #>
			<span class="customize-control-title">
				<span>{{{ data.label }}}</span>
				<# if ( data.description ) { #>
					<i class="dashicons dashicons-editor-help" style="vertical-align: text-bottom;" title="{{{ data.description }}}"></i>
					<# } #>
			</span>
			<# if( data.media_query===true ) { #>
				<?php $this->render_responsive_switches(); ?>
				<# } #>
					<# } #>
					<?php
				}

				/**
				 * Render the responsive switches.
				 */
				private function render_responsive_switches()
				{
					?>
						<ul class="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>
					<?php
				}

				/**
				 * Render the input.
				 */
				private function render_input()
				{
					?>
						<# var type=data.sum_type ? 'text' : 'number' ; var value=data.value ? data.value[mediaQuery] : attr.default; if( ! data.media_query ) { value=data.value? data.value : attr.default } var active=mediaQuery==='desktop' ? 'active' : '' ; if( data.sum_type ) { value='+' + value; } #>
							<div class="{{mediaQuery}} control-wrap {{active}}">
								<input class="range-slider__range" type="range" min="{{attr.min}}" max="{{attr.max}}" step="{{data.step}}" data-query="{{mediaQuery}}" data-default="{{attr.default}}" value="{{ value }}">
								<input class="range-slider-value" type="{{type}}" title="{{{data.label}}}" min="{{attr.min}}" max="{{attr.max}}" step="{{data.step}}" value="{{ value }}" readonly>
								<span class="range-reset-slider"><span class="dashicons dashicons-image-rotate"></span></span>
							</div>
						<?php
					}

					/**
					 * Render the control's content.
					 */
					protected function content_template()
					{
						$this->render_title();
						?>
							<# var wrapClass=data.media_query ? 'has-media-queries' : '' ; #>
								<div class="range-slider {{wrapClass}}">
									<# if( data.media_query===true ) { #>
										<# _.each( data.inputAttr, function( attr, mediaQuery ) { #>
											<?php $this->render_input(); ?>
											<# } ) #>
												<# } else { var mediaQuery='desktop' ; var attr=data.inputAttr; #>
													<?php $this->render_input(); ?>
													<# } #>
														<input type="hidden" class="range-collector" title="{{{data.label}}}" value="{{data.value}}" {{{data.link}}}>
												<?php
											}

											/**
											 * Transform arguments to object properties
											 */
											private function args_to_props($args)
											{
												if (!empty($args['input_attr'])) {
													$this->input_attr = $args['input_attr'];
												}

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

												if (
													!isset($this->input_attr['mobile']) ||
													!isset($this->input_attr['tablet']) ||
													!isset($this->input_attr['desktop'])
												) {
													$this->media_query = false;
												}

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

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