<?php
/**
 * Customizer Control: fontawesome.
 *
 * @package   kirki-framework/control-fontawesome
 * @copyright Copyright (c) 2023, Themeum
 * @license   https://opensource.org/licenses/MIT
 * @since     1.0
 */

namespace Kirki\Control;

use Kirki\URL;
use Kirki\Control\Base;

// Exit if accessed directly.
if (!defined('ABSPATH')) {
	exit;
}

/**
 * FontAwesome control.
 *
 * @since 1.0
 */
class FontAwesome extends Base
{

	/**
	 * The control type.
	 *
	 * @access public
	 * @since 1.0
	 * @var string
	 */
	public $type = 'kirki-fontawesome';

	/**
	 * The version. Used in scripts & styles for cache-busting.
	 *
	 * @static
	 * @access public
	 * @since 1.0.2
	 * @var string
	 */
	public static $control_ver = '1.0';

	/**
	 * Enqueue control related scripts/styles.
	 *
	 * @access public
	 * @since 1.0
	 * @return void
	 */
	public function enqueue()
	{
		parent::enqueue();

		// Enqueue the script.
		wp_enqueue_script('kirki-control-fontawesome', URL::get_from_path(dirname(dirname(__DIR__)) . '/dist/control.js'), array('jquery', 'customize-base', 'kirki-control-base'), self::$control_ver, false);

		// Enqueue the style.
		wp_enqueue_style('kirki-control-fontawesome-style', URL::get_from_path(dirname(dirname(__DIR__)) . '/dist/control.css'), array(), self::$control_ver);

		// Enqueue FontAwesome CSS
		wp_enqueue_style('fontawesome', get_template_directory_uri() . '/assets/customizer-repeater/css/font-awesome.min.css', array(), '6.0.0');
	}

	/**
	 * Refresh the parameters passed to the JavaScript via JSON.
	 *
	 * @access public
	 * @since 1.0
	 * @return void
	 */
	public function to_json()
	{
		parent::to_json();
		$this->json['icons'] = $this->get_fontawesome_icons();
	}

	/**
	 * Get FontAwesome icons array.
	 *
	 * @access private
	 * @since 1.0
	 * @return array
	 */
	private function get_fontawesome_icons()
	{
		return array(
			'brands' => array(
				'fa-behance',
				'fa-behance-square',
				'fa-instagram',
				'fa-square-instagram',
				'fa-facebook',
				'fa-facebook-square',
				'fa-google-plus',
				'fa-google-plus-square',
				'fa-linkedin-in',
				'fa-linkedin',
				'fa-twitter',
				'fa-twitter-square',
				'fa-vimeo',
				'fa-vimeo-square',
				'fa-youtube',
				'fa-youtube-square',
				'fa-android',
				'fa-apple',
				'fa-btc',
				'fa-black-tie',
				'fa-wordpress',
				'fa-wordpress-simple',
				'fa-whatsapp',
				'fa-whatsapp-square',
			),
			'solid' => array(
				'fa-truck-medical',
				'fa-hands-asl-interpreting',
				'fa-anchor',
				'fa-box-archive',
				'fa-area-chart',
				'fa-asterisk',
				'fa-automobile',
				'fa-balance-scale',
				'fa-ban',
				'fa-building-columns',
				'fa-bicycle',
				'fa-cake-candles',
				'fa-bookmark',
				'fa-briefcase',
				'fa-bus',
				'fa-taxi',
				'fa-camera',
				'fa-check',
				'fa-children',
				'fa-code',
				'fa-mug-hot',
				'fa-gear',
				'fa-comment-dots',
				'fa-cube',
				'fa-dollar-sign',
				'fa-diamond',
				'fa-envelope',
				'fa-person-dress',
				'fa-fire-extinguisher',
				'fa-glass-water',
				'fa-globe',
				'fa-graduation-cap',
				'fa-heart-pulse',
				'fa-heart',
				'fa-hotel',
				'fa-hourglass',
				'fa-house',
				'fa-gavel',
				'fa-lock',
				'fa-signs-post',
				'fa-paintbrush',
				'fa-plane',
				'fa-rocket',
				'fa-puzzle-piece',
				'fa-shield',
				'fa-tag',
				'fa-xmark',
				'fa-unlock',
				'fa-user',
				'fa-user-doctor',
				'fa-video',
				'fa-wrench',
			),
		);
	}

	/**
	 * An Underscore (JS) template for this control's content (but not its container).
	 *
	 * Class variables for this control class are available in the `data` JS object;
	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
	 *
	 * @see WP_Customize_Control::print_template()
	 *
	 * @access protected
	 * @since 1.0
	 * @return void
	 */
	protected 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="kirki-fontawesome-control">
							<div class="input-group icp-container">
								<input type="text" class="kirki-fontawesome-input" value="{{ data.value }}" {{{ data.link }}}
									placeholder="<?php esc_attr_e('Select an icon...', 'blog-over'); ?>" />
								<span class="input-group-addon kirki-fontawesome-preview">
									<i class="fa {{ data.value }}"></i>
								</span>
								<button type="button" class="kirki-fontawesome-picker-btn">
									<span class="dashicons dashicons-search"></span>
								</button>
							</div>

							<div class="kirki-fontawesome-picker-popover">
								<div class="kirki-fontawesome-picker-header">
									<input type="search" class="kirki-fontawesome-search"
										placeholder="<?php esc_attr_e('Search icons...', 'blog-over'); ?>">
								</div>
								<div class="kirki-fontawesome-picker-content">
									<div class="kirki-fontawesome-picker-tabs">
										<button type="button" class="kirki-fontawesome-tab active"
											data-tab="solid"><?php esc_html_e('Solid', 'blog-over'); ?></button>
										<button type="button" class="kirki-fontawesome-tab"
											data-tab="brands"><?php esc_html_e('Brands', 'blog-over'); ?></button>
									</div>
									<div class="kirki-fontawesome-icons-container">
										<div class="kirki-fontawesome-icons-tab kirki-fontawesome-icons-solid active">
											<# _.each( data.icons.solid, function( icon ) { #>
												<i class="fa fa-solid {{ icon }}" data-icon="{{ icon }}" title="{{ icon }}"></i>
												<# }); #>
										</div>
										<div class="kirki-fontawesome-icons-tab kirki-fontawesome-icons-brands">
											<# _.each( data.icons.brands, function( icon ) { #>
												<i class="fa fa-brands {{ icon }}" data-icon="{{ icon }}"
													title="{{ icon }}"></i>
												<# }); #>
										</div>
									</div>
								</div>
							</div>
						</div>
						<?php
	}
}
