<?php
/**
 * Interactive Cursor element.
 *
 * @package BricksExtras
 */

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

/**
 * Interactive Cursor element class.
 */
class X_Interactive_Cursor extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xinteractivecursor';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-control-record';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Interactive Cursor', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'cursor' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$this->controls['builderHidden'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Hide in builder', 'bricksextras' ),
			'type'   => 'checkbox',
		);

		$this->controls['builderHidden_sep'] = array(
			'tab'  => 'content',
			'type' => 'separator',
		);

		$this->controls['hoverSelectors'] = array(
			'tab'            => 'content',
			'label'          => esc_html__( 'CSS selectors', 'bricks' ) . ' (' . esc_html__( 'Hover', 'bricks' ) . ')',
			'info'           => esc_html__( 'Include all selectors where the cursor should turn into the hover state', 'bricksextras' ),
			'type'           => 'text',
			'default'        => 'a, button, input, textarea, .splide__slide, .vds-button',
			'hasDynamicData' => false,
		);

		$this->controls['trailDelay'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Speed', 'bricks' ) . ' (' . esc_html__( 'Cursor trail', 'bricksextras' ) . ')',
			'info'        => '0-1',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'max'         => 1,
			'step'        => .025,
			'placeholder' => .2,
		);

		$this->controls['statusSep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Status', 'bricks' ),
		);

		$this->controls['builderPreview'] = array(
			'tab'       => 'content',
			'label'     => esc_html__( 'Preview', 'bricks' ),
			'type'      => 'select',
			'inline'    => true,
			'options'   => array(
				'default'      => esc_html__( 'Default', 'bricks' ),
				'trail-grow'   => esc_html__( 'Hover', 'bricks' ),
				'text-visible' => esc_html__( 'Text', 'bricks' ),
				'mousedown'    => esc_html__( 'Click', 'bricks' ),
			),
			'clearable' => false,
			'default'   => 'default',
		);

		/* default state */

		$this->controls['ballScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor ball', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'max'         => 2,
			'step'        => 0.05,
			'placeholder' => 0.7,
			'css'         => array(
				array(
					'property' => '--x-cursor-text-start',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'default' ),
		);

		$this->controls['trailScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor trail', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'max'         => 2,
			'step'        => 0.05,
			'placeholder' => 1,
			'css'         => array(
				array(
					'property' => '--x-cursor-trail-start',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'default' ),
		);

		/* hover state */

		$this->controls['hoverStateSep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'label'       => esc_html__( 'Hover', 'bricks' ),
			'description' => esc_html__( 'When cursor passes over any of the chosen hover selectors (above).', 'bricksextras' ),
			'required'    => array( 'builderPreview', '=', 'trail-grow' ),
		);

		$this->controls['ballHoverScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor ball', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'step'        => 0.025,
			'placeholder' => 0,
			'css'         => array(
				array(
					'property' => '--x-cursor-text-end',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'trail-grow' ),
		);

		$this->controls['trailHoverScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor trail', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'step'        => 0.025,
			'placeholder' => 3,
			'css'         => array(
				array(
					'property' => '--x-cursor-trail-scale',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'trail-grow' ),
		);

		/* text state */

		$this->controls['textVisibleSep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'label'       => esc_html__( 'Text', 'bricks' ),
			'description' => sprintf(
				/* translators: %s: HTML attribute name */
				esc_html__( 'When hovering over elements with a %s attribute.', 'bricksextras' ),
				'data-x-hover'
			),
			'required'    => array( 'builderPreview', '=', 'text-visible' ),
		);

		$this->controls['ballTextScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor ball', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'step'        => 0.025,
			'placeholder' => 10,
			'css'         => array(
				array(
					'property' => '--x-cursor-text-scale',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'text-visible' ),
		);

		$this->controls['ballTypography'] = array(
			'tab'      => 'content',
			'type'     => 'typography',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '',
				),
			),
			'required' => array( 'builderPreview', '=', 'text-visible' ),
		);

		/* mousedown state */

		$this->controls['mouseDownSep'] = array(
			'tab'      => 'content',
			'type'     => 'separator',
			'label'    => esc_html__( 'Click', 'bricks' ),
			'required' => array( 'builderPreview', '=', 'mousedown' ),
		);

		$this->controls['ballMousedownScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor ball', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'step'        => 0.025,
			'placeholder' => 0.3,
			'css'         => array(
				array(
					'property' => '--x-cursor-text-down',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'mousedown' ),
		);

		$this->controls['trailMousedownScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ) . ' (' . esc_html__( 'Cursor trail', 'bricksextras' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'step'        => 0.025,
			'placeholder' => 0.8,
			'css'         => array(
				array(
					'property' => '--x-cursor-trail-down',
					'selector' => '',
				),
			),
			'required'    => array( 'builderPreview', '=', 'mousedown' ),
		);

		$this->controls['stylesSep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Styles', 'bricks' ),
		);

		$this->controls['ballColor'] = array(
			'tab'   => 'content',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Cursor ball', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => '--x-cursor-ball-color',
					'selector' => '',
				),
			),
		);

		$this->controls['ballRadius'] = array(
			'tab'         => 'content',
			'type'        => 'number',
			'units'       => true,
			'label'       => esc_html__( 'Border radius', 'bricks' ) . ' (' . esc_html__( 'Cursor ball', 'bricksextras' ) . ')',
			'css'         => array(
				array(
					'property' => 'border-radius',
					'selector' => '.x-cursor_ball::after',
				),
			),
			'placeholder' => '50%',
		);

		$this->controls['trailColor'] = array(
			'tab'   => 'content',
			'type'  => 'color',
			'label' => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Cursor trail', 'bricksextras' ) . ')',
			'css'   => array(
				array(
					'property' => '--x-cursor-trail-color',
					'selector' => '',
				),
			),
		);

		$this->controls['trailRadius'] = array(
			'tab'         => 'content',
			'type'        => 'number',
			'units'       => true,
			'label'       => esc_html__( 'Border radius', 'bricks' ) . ' (' . esc_html__( 'Cursor trail', 'bricksextras' ) . ')',
			'css'         => array(
				array(
					'property' => 'border-radius',
					'selector' => '.x-cursor_trail',
				),
			),
			'placeholder' => '50%',
		);

		$this->controls['waitSep'] = array(
			'tab'  => 'content',
			'type' => 'separator',
		);

		$this->controls['wait'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Delay', 'bricks' ) . ' (' . esc_html__( 'Loading', 'bricks' ) . ')',
			'type'        => 'number',
			'units'       => false,
			'min'         => 0,
			'max'         => 1000,
			'step'        => 1,
			'placeholder' => 100,
		);
	}

	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-cursor', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'cursor' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-cursor', BRICKSEXTRAS_URL . 'components/assets/css/interactivecursor.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$hover_selectors = isset( $this->settings['hoverSelectors'] ) ? $this->settings['hoverSelectors'] : 'a, button, input';
		$trail_delay     = isset( $this->settings['trailDelay'] ) ? $this->settings['trailDelay'] : .2;
		$wait            = isset( $this->settings['wait'] ) ? $this->settings['wait'] : 100;

		$config = array(
			'hoverSelectors' => $hover_selectors,
			'trailDelay'     => $trail_delay,
			'wait'           => $wait,
		);

		$this->set_attribute( '_root', 'data-x-cursor', wp_json_encode( $config ) );
		$this->set_attribute( '_root', 'aria-hidden', 'true' );
		$this->set_attribute( '_root', 'class', array( 'x-interactive-cursor' ) );
		$this->set_attribute( 'x-cursor_ball', 'class', array( 'x-cursor_ball', 'x-cursor_inner' ) );
		$this->set_attribute( 'x-cursor_trail', 'class', array( 'x-cursor_trail', 'x-cursor_inner' ) );
		$this->set_attribute( 'x-cursor_text', 'class', array( 'x-cursor_text' ) );

		$output = '';

		$output .= "<div {$this->render_attributes( '_root' )}>";
		$output .= "<div {$this->render_attributes( 'x-cursor_ball' )}>";
		$output .= "<span {$this->render_attributes( 'x-cursor_text' )}></span>";
		$output .= '</div>';
		$output .= "<div {$this->render_attributes( 'x-cursor_trail' )}></div>";
		$output .= '</div>';

		echo $output;
	}

	/**
	 * Render builder template.
	 */
	public static function render_builder() {
		?>

		<script type="text/x-template" id="tmpl-bricks-element-xinteractivecursor">

		<component 
			v-if="!settings.builderHidden"
			class="brxe-xinteractivecursor x-interactive-cursor x-cursor_ready" 
			:class="'x-cursor_' + settings.builderPreview"
			data-x-cursor=""
		>
		
			<div class="x-cursor_ball x-cursor_inner">
				<span class="x-cursor_text">Hover text</span>
			</div>
			<div class="x-cursor_trail x-cursor_inner"></div>
	
		</component>
			
		</script>

		<?php
	}
}