<?php
/**
 * Customize for gradient color, extend the WP customizer
 *
 * @package Customizer_Library
 */

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

/**
 * Gradient Color Control
 */
class Customizer_Library_Gradient extends WP_Customize_Control {
	/**
	 * The type of control being rendered
	 *
	 * @var $type Fonts Type.
	 */
	public $type = 'gradient';

	/**
	 * Color palette defaults
	 *
	 * @var $defaultpalette Color pallete.
	 */
	public $defaultpalette = array(
		'#000000',
		'#ffffff',
		'#dd3333',
		'#dd9933',
		'#eeee22',
		'#81d742',
		'#1e73be',
		'#8224e3',
	);

	/**
	 * Construct
	 *
	 * @param string $manager Manager.
	 * @param int    $id Font ID.
	 * @param array  $args Arguments.
	 * @param array  $options Options.
	 */
	public function __construct( $manager, $id, $args = array(), $options = array() ) {
		parent::__construct( $manager, $id, $args );

		// Decode the default json font value.
		$this->allvalues = json_decode( $this->value() );
		$this->default   = json_decode( $this->setting->default );
	}

	/**
	 * Pass our Palette colours to JavaScript
	 */
	public function to_json() {
		parent::to_json();
		$this->json['colorpickerpalette'] = isset( $this->input_attrs['palette'] ) ? $this->input_attrs['palette'] : $this->defaultpalette;
	}

	/**
	 * Don't render the control content from PHP, as it's rendered via JS on load.
	 */
	public function render_content() {
		?>
			<?php if ( ! empty( $this->label ) ) { ?>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php } ?>
			<?php if ( ! empty( $this->description ) ) { ?>
				<span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
			<?php } ?>
			<div class="idtheme-color-picker-control">
				<input type="hidden" id="<?php echo esc_attr( $this->id ); ?>" name="<?php echo esc_attr( $this->id ); ?>" value="<?php echo esc_attr( $this->value() ); ?>" class="idtheme-colorgradient-selection" <?php $this->link(); ?> />
				<span class="customize-control-title title-color"><?php esc_html_e( 'From To', 'wpmedia' ); ?></span>
				<input type="text" class="idtheme-color-picker idtcolgrad1" id="<?php echo esc_attr( $this->id ); ?>" value="<?php echo esc_attr( $this->allvalues->color1 ); ?>" data-default-color="<?php echo esc_attr( $this->default->color1 ); ?>" />
				<input type="text" class="idtheme-color-picker idtcolgrad2" id="<?php echo esc_attr( $this->id ); ?>" value="<?php echo esc_attr( $this->allvalues->color2 ); ?>" data-default-color="<?php echo esc_attr( $this->default->color2 ); ?>" />
				<div class="idtheme-suboption">
					<span class="customize-control-title"><?php esc_html_e( 'Direction', 'wpmedia' ); ?></span>
					<input type="range" min="1" max="360" step="1" class="idtcoldirection" value="<?php echo intval( $this->allvalues->direction ); ?>" />
				</div>
			</div>
		<?php
	}

	/**
	 * Render a JS template for the content of the color picker control.
	 *
	 * @since 4.1.0
	 */
	public function content_template() {}
}
