<?php
if ( ! defined( 'WPINC' ) ) {
	die;
}

/**
 * Class Epsilon_Control_Image
 */
class Epsilon_Control_Image extends WP_Customize_Control {
	/**
	 * @since 1.2.0
	 * @var string
	 */
	public $type = 'epsilon-image';

	/**
	 * @since 1.2.0
	 * @var array
	 */
	public $default;

	/**
	 * @since 1.2.0
	 * @var string
	 */
	public $size = 'full';

	/**
	 * Epsilon_Control_Image constructor.
	 *
	 * @since 1.2.0
	 *
	 * @param WP_Customize_Manager $manager
	 * @param string               $id
	 * @param array                $args
	 */
	public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
		parent::__construct( $manager, $id, $args );
		$manager->register_control_type( 'Epsilon_Control_Image' );
	}

	/**
	 * Add custom parameters to pass to the JS via JSON.
	 *
	 * @since  1.2.0
	 * @access public
	 */
	public function json() {
		$json = parent::json();

		$json['id']             = $this->id;
		$json['link']           = $this->get_link();
		$json['stringifiedVal'] = $this->value();
		$json['value']          = $this->sanitize_value();
		$json['default']        = $this->default;
		$json['size']           = $this->size;
		$json['sizeArray']      = Epsilon_Framework::get_image_sizes();

		return $json;
	}

	/**
	 * Sanitize the result so we can use it
	 *
	 * @since  1.2.0
	 * @access private
	 */
	private function sanitize_value() {
		$val = json_decode( $this->value() );

		return $val;
	}

	/**
	 * Empty, as it should be
	 *
	 * @since 1.2.0
	 */
	public function render_content() {

	}

	/**
	 * Controller template
	 *
	 * @since 1.2.0
	 */
	public function content_template() {
		//@formatter:off ?>
		<label>
			<span class="customize-control-title">
				{{{ data.label }}}
				<# if( data.description ){ #>
					<i class="dashicons dashicons-editor-help" style="vertical-align: text-bottom; position: relative;">
						<span class="mte-tooltip">
							{{{ data.description }}}
						</span>
					</i>
				<# } #>
			</span>
		</label>
		<div class="epsilon-controller-image-container image-upload">
			<input type="hidden" id="{{ data.id }}" {{{ data.link }}}  <# if ( '' !== data.stringifiedVal ) { #> value="{{ data.stringifiedVal }}" <# } #> />
			<# if ( ! _.isEmpty( data.value ) && data.value.url ) { #>
			<div class="epsilon-image">
				<img src="{{{ data.value.url }}}" />
			</div>
			<# } else { #>
			<div class="placeholder">
				<?php echo esc_html__( 'Upload image', 'epsilon-framework' ); ?>
				<# if ( ! _.isUndefined( data.sizeArray[data.size] ) ) { #>
					<span class="recommended-size"><?php echo esc_html__('Recommended resolution:', 'epsilon-framework'); ?> {{{ data.sizeArray[data.size].width }}} x {{{ data.sizeArray[data.size].height }}}</span>
				<# } #>
			</div>
			<# } #>
			<div class="actions">
				<button class="button image-upload-remove-button" <# if( '' === data.stringifiedVal ) { #> style="display:none;" <# } #>>
					<?php esc_attr_e( 'Remove', 'epsilon-framework' ); ?>
				</button>

				<button type="button" class="button-secondary image-default-button" <# if ( _.isEmpty( data.default ) ) { #> style="display:none;" <# } #>>
					<?php echo esc_html__( 'Default', 'epsilon-framework' ); ?>
				</button>

				<button type="button" class="button-primary image-upload-button">
					<?php echo esc_html__( 'Select File', 'epsilon-framework' ); ?>
				</button>
			</div>
		</div>
		<?php
		//@formatter:on
	}
}
