<?php
/**
 * Color control (with alpha) class
 *
 * @package Multi
 */

/**
 * The color & alpha control for customizer
 */
class Multimagazine_ColorControl extends WP_Customize_Control {

	/**
	 * Control type.
	 *
	 * @var string $type Control type name.
	 */
	public $type = 'alphacolor';
	/**
	 * Color palette.
	 *
	 * @var string $palette Palette. Comma-separated color codes or true.
	 */
	public $palette = true;
	// phpcs:ignore public $palette = '#3FADD7,#555555,#666666, #F5f5f5,#333333,#404040,#2B4267';
	/**
	 * Default color.
	 *
	 * @var string $default Default color hex value.
	 */
	public $default = '';

	/**
	 * Enqueues control's js
	 */
	public function enqueue() {
		$debug_suffix = WP_DEBUG ? '?v=' . time() : '';
		wp_enqueue_script( 'multimagazine-lib-color-picker', get_template_directory_uri() . '/js/lib/acolorpicker.min.js', array(), '1', true );
		wp_enqueue_script( 'multimagazine-color-picker', get_template_directory_uri() . '/js/customize/multimagazine-colorpicker.js' . $debug_suffix, array( 'multimagazine-lib-color-picker' ), '1', true );
	}

	/**
	 * Renders the control container
	 */
	protected function render() {
		$id    = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
		$class = 'customize-control customize-control-' . $this->type;
		?>
		<li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
			<?php $this->render_content(); ?>
		</li>
		<?php
	}

	/**
	 * Renders the control
	 */
	public function render_content() {
		?>
		<label class="multi-color-control">
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<input type="text" value="<?php echo esc_attr( $this->value() ); ?>" class="multi-color-control-input" <?php $this->link(); ?>>
			<div class="multi-color-control-picker"></div>
		</label>
		<?php
	}
}
