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

namespace Kirki\Control;

use Kirki\URL;
use Kirki\Control\Base;
use Kirki\Control\IconPicker\Util\CommonIcons;

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

/**
 * IconPicker control - a more focused version of FontAwesome control.
 *
 * @since 1.0
 */
class IconPicker extends Base {

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

	/**
	 * The version. Used in scripts & styles for cache-busting.
	 *
	 * @static
	 * @access public
	 * @since 1.0
	 * @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-iconpicker',
			URL::get_from_path( dirname( __DIR__ ) . '/control.js' ),
			array( 'jquery', 'customize-base' ),
			self::$control_ver,
			false
		);

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

		// Enqueue FontAwesome from inc/fontawesome if available
		$fa_path     = dirname( dirname( __DIR__ ) ) . '/dist/fontawesome/css/all.css';
		$fa_css_path = $fa_path;
		$fa_css_url  = URL::get_from_path( $fa_path );

		if ( file_exists( $fa_css_path ) ) {
			wp_enqueue_style(
				'fontawesome-iconpicker',
				$fa_css_url,
				array(),
				self::$control_ver
			);
		}
	}

	/**
	 * Get the icons for different categories.
	 *
	 * @access protected
	 * @since 1.0
	 * @return array
	 */
	protected function get_icons() {
		// Get common icons from the utility class
		$common_icons = CommonIcons::get_common_icons();

		return array(
			'solid'  => $common_icons['Solid'],
			'brands' => $common_icons['Brand'],
		);
	}

	/**
	 * 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_icons();
		$this->json['categories'] = array(
			'solid'  => esc_html__( 'Solid', 'blog-over' ),
			'brands' => esc_html__( 'Brands', 'blog-over' ),
		);
	}

	/**
	 * An Underscore (JS) template for this control's content (but not its container).
	 *
	 * @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-iconpicker-control">
			<div class="input-group">
				<input 
					type="text" 
					class="kirki-iconpicker-input" 
					value="{{ data.value }}" 
					{{{ data.link }}}
					placeholder="<?php esc_attr_e( 'Select an icon...', 'blog-over' ); ?>"
				/>
				<span class="input-group-addon kirki-iconpicker-preview">
					<i class="{{ data.value }}"></i>
				</span>
				<button type="button" class="kirki-iconpicker-picker-btn">
					<span class="dashicons dashicons-search"></span>
				</button>
			</div>
			
			<div class="kirki-iconpicker-picker-popover">
				<div class="kirki-iconpicker-picker-header">
					<input type="search" class="kirki-iconpicker-search" placeholder="<?php esc_attr_e( 'Search icons...', 'blog-over' ); ?>">
				</div>
				
				<div class="kirki-iconpicker-picker-content">
					<div class="kirki-iconpicker-picker-tabs">
						<# _.each( data.categories, function( label, id ) { #>
							<button type="button" class="kirki-iconpicker-tab <# if (id === 'solid') { #>active<# } #>" data-tab="{{ id }}">{{ label }}</button>
						<# }); #>
					</div>
					
					<div class="kirki-iconpicker-icons-container">
						<# _.each( data.icons, function( icons, category ) { #>
							<div class="kirki-iconpicker-icons-tab kirki-iconpicker-icons-{{ category }} <# if (category === 'solid') { #>active<# } #>">
								<# _.each( icons, function( icon ) { #>
									<i class="{{ icon.class }}" data-icon="{{ icon.class }}" title="{{ icon.name }}"></i>
								<# }); #>
							</div>
						<# }); #>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render the control's content.
	 *
	 * @access public
	 * @since 1.0
	 * @return void
	 */
	public function render_content() {
		?>
		<label>
			<?php if ( ! empty( $this->label ) ) : ?>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php endif; ?>
			<?php if ( ! empty( $this->description ) ) : ?>
				<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
			<?php endif; ?>
			
			<div class="kirki-iconpicker-control">
				<div class="input-group">
					<input 
						type="text" 
						class="kirki-iconpicker-input" 
						value="<?php echo esc_attr( $this->value() ); ?>" 
						<?php $this->link(); ?>
						placeholder="<?php esc_attr_e( 'Select an icon...', 'blog-over' ); ?>"
					/>
					<span class="input-group-addon kirki-iconpicker-preview">
						<i class="<?php echo esc_attr( $this->value() ); ?>"></i>
					</span>
					<button type="button" class="kirki-iconpicker-picker-btn">
						<span class="dashicons dashicons-search"></span>
					</button>
				</div>
				
				<div class="kirki-iconpicker-picker-popover">
					<div class="kirki-iconpicker-picker-header">
						<input type="search" class="kirki-iconpicker-search" placeholder="<?php esc_attr_e( 'Search icons...', 'blog-over' ); ?>">
					</div>
					
					<div class="kirki-iconpicker-picker-content">
						<div class="kirki-iconpicker-picker-tabs">
							<?php
							$categories = array(
								'solid'  => esc_html__( 'Solid', 'blog-over' ),
								'brands' => esc_html__( 'Brands', 'blog-over' ),
							);
							foreach ( $categories as $id => $label ) {
								$active = $id === 'solid' ? 'active' : '';
								echo '<button type="button" class="kirki-iconpicker-tab ' . esc_attr( $active ) . '" data-tab="' . esc_attr( $id ) . '">' . esc_html( $label ) . '</button>';
							}
							?>
						</div>
						
						<div class="kirki-iconpicker-icons-container">
							<?php
							$icons = $this->get_icons();
							foreach ( $icons as $category => $icons_list ) {
								$active = $category === 'solid' ? 'active' : '';
								echo '<div class="kirki-iconpicker-icons-tab kirki-iconpicker-icons-' . esc_attr( $category ) . ' ' . esc_attr( $active ) . '">';
								foreach ( $icons_list as $icon ) {
									echo '<i class="' . esc_attr( $icon['class'] ) . '" data-icon="' . esc_attr( $icon['class'] ) . '" title="' . esc_attr( $icon['name'] ) . '"></i>';
								}
								echo '</div>';
							}
							?>
						</div>
					</div>
				</div>
			</div>
		</label>
		<?php
	}
}
