<?php
/**
 * Customizer Control: dimensions.
 *
 * @package     WFOCUKirki
 * @subpackage  Controls
 * @copyright   Copyright (c) 2017, Aristeides Stathopoulos
 * @license     http://opensource.org/licenses/https://opensource.org/licenses/MIT
 * @since       2.1
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
if ( ! class_exists( 'WFOCUKirki_Control_Dimensions' ) ) {
	/**
	 * Dimensions control.
	 * multiple fields with CSS units validation.
	 */
	class WFOCUKirki_Control_Dimensions extends WFOCUKirki_Control_Base {

		/**
		 * The control type.
		 *
		 * @access public
		 * @var string
		 */
		public $type = 'wfocukirki-dimensions';

		/**
		 * Refresh the parameters passed to the JavaScript via JSON.
		 *
		 * @see WP_Customize_Control::to_json()
		 */
		public function to_json() {
			parent::to_json();

			if ( is_array( $this->choices ) ) {
				foreach ( $this->choices as $choice => $value ) {
					if ( 'labels' !== $choice && true === $value ) {
						$this->json['choices'][ $choice ] = true;
					}
				}
			}
			if ( is_array( $this->json['default'] ) ) {
				foreach ( $this->json['default'] as $key => $value ) {
					if ( isset( $this->json['choices'][ $key ] ) && ! isset( $this->json['value'][ $key ] ) ) {
						$this->json['value'][ $key ] = $value;
					}
				}
			}
		}

		/**
		 * Enqueue control related scripts/styles.
		 *
		 * @access public
		 */
		public function enqueue() {

			wp_enqueue_style( 'wfocukirki-styles', trailingslashit( WFOCUKirki::$url ) . 'controls/css/styles.css', array(), WFOCU_KIRKI_VERSION );
			wp_localize_script( 'wfocukirki-script', 'dimensionswfocukirkiL10n', $this->l10n() );
		}

		/**
		 * An Underscore (JS) template for this control's content (but not its container).
		 *
		 * Class variables for this control class are available in the `data` JS object;
		 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
		 *
		 * @see WP_Customize_Control::print_template()
		 *
		 * @access protected
		 */
		protected function content_template() {
			?>
            <label>
                <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
                <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
                <div class="wrapper">
                    <div class="control">
                        <# for ( choiceKey in data.default ) { #>
                        <div class="{{ choiceKey }}">
                            <h5>
                                <# if ( ! _.isUndefined( data.choices.labels ) && ! _.isUndefined( data.choices.labels[ choiceKey ] ) ) { #>
                                {{ data.choices.labels[ choiceKey ] }}
                                <# } else if ( ! _.isUndefined( data.l10n[ choiceKey ] ) ) { #>
                                {{ data.l10n[ choiceKey ] }}
                                <# } else { #>
                                {{ choiceKey }}
                                <# } #>
                            </h5>
                            <div class="{{ choiceKey }} input-wrapper">
                                <# var val = ( ! _.isUndefined( data.value ) && ! _.isUndefined( data.value[ choiceKey ] ) ) ? data.value[ choiceKey ].toString().replace( '%%', '%' ) : ''; #>
                                <input {{{ data.inputAttrs }}} type="text" data-choice="{{ choiceKey }}" value="{{ val }}"/>
                            </div>
                        </div>
                        <# } #>
                    </div>
                </div>
            </label>
			<?php
		}

		/**
		 * Returns an array of translation strings.
		 *
		 * @access protected
		 * @return array
		 * @since 3.0.0
		 */
		protected function l10n() {
			return array(
				'left-top'       => esc_attr__( 'Left Top', 'wfocukirki' ),
				'left-center'    => esc_attr__( 'Left Center', 'wfocukirki' ),
				'left-bottom'    => esc_attr__( 'Left Bottom', 'wfocukirki' ),
				'right-top'      => esc_attr__( 'Right Top', 'wfocukirki' ),
				'right-center'   => esc_attr__( 'Right Center', 'wfocukirki' ),
				'right-bottom'   => esc_attr__( 'Right Bottom', 'wfocukirki' ),
				'center-top'     => esc_attr__( 'Center Top', 'wfocukirki' ),
				'center-center'  => esc_attr__( 'Center Center', 'wfocukirki' ),
				'center-bottom'  => esc_attr__( 'Center Bottom', 'wfocukirki' ),
				'font-size'      => esc_attr__( 'Font Size', 'wfocukirki' ),
				'font-weight'    => esc_attr__( 'Font Weight', 'wfocukirki' ),
				'line-height'    => esc_attr__( 'Line Height', 'wfocukirki' ),
				'font-style'     => esc_attr__( 'Font Style', 'wfocukirki' ),
				'letter-spacing' => esc_attr__( 'Letter Spacing', 'wfocukirki' ),
				'word-spacing'   => esc_attr__( 'Word Spacing', 'wfocukirki' ),
				'top'            => esc_attr__( 'Top', 'wfocukirki' ),
				'bottom'         => esc_attr__( 'Bottom', 'wfocukirki' ),
				'left'           => esc_attr__( 'Left', 'wfocukirki' ),
				'right'          => esc_attr__( 'Right', 'wfocukirki' ),
				'center'         => esc_attr__( 'Center', 'wfocukirki' ),
				'size'           => esc_attr__( 'Size', 'wfocukirki' ),
				'height'         => esc_attr__( 'Height', 'wfocukirki' ),
				'spacing'        => esc_attr__( 'Spacing', 'wfocukirki' ),
				'width'          => esc_attr__( 'Width', 'wfocukirki' ),
				'height'         => esc_attr__( 'Height', 'wfocukirki' ),
				'invalid-value'  => esc_attr__( 'Invalid Value', 'wfocukirki' ),
			);
		}
	}
}