<?php
namespace TotalTheme\Customizer\Controls;

use \WP_Customize_Control;

defined( 'ABSPATH' ) || exit;

/**
 * Customizer Ticon Select Control.
 *
 * @package TotalTheme
 * @subpackage Customizer
 * @version 5.5
 */
class Ticon_Select extends WP_Customize_Control {

	/**
	 * The control type.
	 */
	public $type = 'wpex_ticon_select';

	/**
	 * Send data to content_template.
	 */
	public function to_json() {
		parent::to_json();

		$value = $this->value();

		// The setting value.
		$this->json['value'] = $value;

		// The data link.
		$this->json['link'] = $this->get_link();

		// Send svg.
		$this->json['svg'] = $value ? wpex_get_svg( 'ticons/' . $value ) : '';
	}

	/**
	 * Don't render the control content from PHP, as it's rendered via JS on load.
	 */
	public function render_content() {}

	/**
	 * The control template.
	 */
	public function content_template() {

		?>

		<# 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="wpex-customize-icon-select">

			<div>
				<div class="wpex-customize-icon-select__preview <# if ( ! data.svg ) { #>wpex-customize-icon-select__preview--empty<# } #>">
					<div class="wpex-customize-icon-select__svg">{{{ data.svg }}}</div>
					<a href="#" class="wpex-customize-icon-select__remove"><?php wpex_svg( 'material/close' ); ?><span class="screen-reader-text"><?php esc_html_e( 'remove icon', 'total' ); ?></span></a>
				</div>
			</div>

			<button type="button" class="button button-secondary wpex-customize-icon-select__button"><?php echo esc_html__( 'Select icon', 'total' ); ?></button>

			<?php
			$icons = wpex_ticons_list();

			if ( ! $icons ) {
				return;
			}
			?>

			<div class="wpex-customize-icon-select-modal">
				<div class="wpex-customize-icon-select-modal__inner">
					<span class="screen-reader-text"><label for="wpex-customize-icon-select-search"><?php esc_html_e( 'Search for an icon', 'total' ); ?></label></span>
					<input class="wpex-customize-icon-select-modal__search" id="wpex-customize-icon-select-search" type="search" placeholder="<?php esc_html_e( 'Search for an icon', 'total' ); ?>&hellip;">
					<div class="wpex-customize-icon-select-modal__choices">
						<?php foreach ( $icons as $icon_class => $icon_name ) {
							$a_title = empty( $icon_class ) ? esc_html__( 'None', 'total' ) : $icon_name;
							$a_title = str_replace( '-', ' ', $a_title );
							?>
							<a href="#" title="<?php echo esc_html( $a_title ); ?>" data-value="<?php echo esc_attr( $icon_class ); ?>"><?php wpex_svg( 'ticons/' . str_replace( 'ticons ticons-', '', $icon_class ), '1em' ); ?></a>
						<?php } ?>
					</div>
					<button class="button-primary wpex-customize-icon-select-modal__close"><?php esc_html_e( 'Close', 'total' ); ?></button>
				</div>
			</div>
		</div>

	<?php }
}