<?php
/**
 * Customizer Control: zenvy_multi_select
 *
 * @package Zenvy
 */

/**
 * Zenvy_Customize_Multi_Select_Control class
 */
class Zenvy_Customize_Multi_Select_Control extends Zenvy_Customize_Base_Control {

	/**
	 * The type of customize control being rendered.
	 *
	 * @access public
	 * @var    string
	 */
	public $type = 'zenvy_multi_select';

	/**
	 * Set up our control.
	 *
	 * @access public
	 * @param  object $manager Customizer manager instance.
	 * @param  string $id      Control ID.
	 * @param  array  $args    Optional. Control arguments. Default empty array.
	 * @return void
	 */
	public function __construct( $manager, $id, $args = [] ) {

		// Let the parent class do its thing.
		parent::__construct( $manager, $id, $args );

		add_action( 'customize_controls_enqueue_scripts', [ $this, 'enqueue_script' ] );
	}

	/**
	 * Enqueue control related scripts/styles.
	 *
	 * @access public
	 * @return void
	 */
	public function enqueue_script() {

		// Enqueue style.
		wp_enqueue_style( 'select2', ZENVY_THEME_URI . 'assets/build/library/select2.css', [], '4.1.0' );

		// Enqueue script.
		wp_enqueue_script( 'select2', ZENVY_THEME_URI . 'assets/build/library/select2.js', [ 'jquery' ], '4.1.0', true );
	}

	/**
	 * Underscore JS template to handle the control's output.
	 *
	 * @access public
	 * @return void
	 */
	public function content_template() {
		?>

		<# const resetData = data.default; #>

		<div class="d-flex justify-content-between align-items-center">
			<span class="customize-control-title position-relative">
				{{{ data.label }}}
			</span>

		</div>

		<# if ( data.description ) { #>
		<span class="description customize-control-description">{{{ data.description }}}</span>
		<# } #>

		<div class="control-wrap d-flex flex-wrap align-items-start multi-select-control">
			<select class="select2" multiple="multiple">
				<# _.each( data.choices, function( choiceLabel, choiceID ) { #>
				<option value="{{ choiceID }}">{{ choiceLabel }}</option>
				<# }); #>
			</select>
		</div>

		<?php
	}
}

// Register JS-rendered control types.
$wp_customize->register_control_type( 'Zenvy_Customize_Multi_Select_Control' );