<?php
/**
 * Burger Trigger element.
 *
 * @package BricksExtras
 */

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

/**
 * Burger Trigger element class.
 */
class X_Burger_Trigger extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xburgertrigger';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-menu';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

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

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'burger trigger', 'toggle', 'trigger', 'button' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {
		$css_added = false;
	}

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

		$animations_array = array(
			'x-hamburger--3dx'       => '3dx',
			'x-hamburger--3dy'       => '3dy',
			'x-hamburger--arrow'     => esc_html__( 'arrow', 'bricksextras' ),
			'x-hamburger--arrowalt'  => esc_html__( 'arrow-alt', 'bricksextras' ),
			'x-hamburger--arrowturn' => esc_html__( 'arrowturn', 'bricksextras' ),
			'x-hamburger--boring'    => esc_html__( 'boring', 'bricksextras' ),
			'x-hamburger--collapse'  => esc_html__( 'collapse', 'bricksextras' ),
			'x-hamburger--elastic'   => esc_html__( 'elastic', 'bricksextras' ),
			'x-hamburger--minus'     => esc_html__( 'minus', 'bricksextras' ),
			'x-hamburger--slider'    => esc_html__( 'slider', 'bricksextras' ),
			'x-hamburger--squeeze'   => esc_html__( 'squeeze', 'bricksextras' ),
			'x-hamburger--vortex'    => esc_html__( 'vortex', 'bricksextras' ),
			'x-hamburger--none'      => esc_html__( 'None', 'bricks' ),
		);

		$this->controls['burger_animation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Animation', 'bricks' ),
			'type'        => 'select',
			'options'     => $animations_array,
			'inline'      => true,
			'placeholder' => esc_html__( 'Slider', 'bricks' ),
			'default'     => 'x-hamburger--slider',
		);

		$this->controls['burger_scale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ),
			'type'        => 'number',
			'min'         => 0,
			'max'         => 1,
			'step'        => '0.01',
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-burger-size',
					'selector' => '.x-hamburger-box',
				),
			),
			'placeholder' => esc_html__( '0.8', 'bricksextras' ),
		);

			$this->controls['burger_line_height'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Line height', 'bricks' ),
				'type'        => 'number',
				'min'         => 0,
				'max'         => 10,
				'step'        => '1',
				'units'       => true,
				'inline'      => true,
				'css'         => array(
					array(
						'property' => '--x-burger-line-height',
						'selector' => '.x-hamburger-box',
					),
				),
				'placeholder' => '4px',
			);

			$this->controls['burger_line_radius'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Burger line border radius', 'bricksextras' ),
				'type'        => 'number',
				'min'         => 0,
				'max'         => 10,
				'step'        => '1',
				'units'       => true,
				'inline'      => true,
				'css'         => array(
					array(
						'property' => '--x-burger-line-radius',
						'selector' => '.x-hamburger-box',
					),
				),
				'placeholder' => '4px',
			);

			$this->controls['burger_line_color'] = array(
				'tab'    => 'content',
				'label'  => esc_html__( 'Color', 'bricks' ),
				'type'   => 'color',
				'inline' => true,
				'css'    => array(
					array(
						'property' => '--x-burger-line-color',
						'selector' => '.x-hamburger-box',
					),
				),
			);

			$this->controls['button_bg'] = array(
				'tab'    => 'content',
				'label'  => esc_html__( 'Background color', 'bricks' ),
				'type'   => 'color',
				'inline' => true,
				'css'    => array(
					array(
						'property' => 'background-color',
						'selector' => '',
					),
				),
			);

			$this->controls['burger_padding'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Padding', 'bricks' ),
				'type'        => 'spacing',
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => '',
					),
				),
				'placeholder' => array(
					'top'    => '10px',
					'right'  => '10px',
					'bottom' => '10px',
					'left'   => '10px',
				),
			);

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

			$this->controls['button_bg_active'] = array(
				'tab'    => 'content',
				'label'  => esc_html__( 'Background color', 'bricks' ),
				'type'   => 'color',
				'inline' => true,
				'css'    => array(
					array(
						'property' => 'background-color',
						'selector' => '',
					),
				),
			);

			$this->controls['burger_line_color_active'] = array(
				'tab'    => 'content',
				'label'  => esc_html__( 'Color', 'bricks' ),
				'type'   => 'color',
				'inline' => true,
				'css'    => array(
					array(
						'property' => '--x-burger-line-color-active',
						'selector' => '.x-hamburger-box',
					),
				),
			);

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

			$this->controls['aria_label'] = array(
				'tab'         => 'content',
				'label'       => 'aria-label',
				'type'        => 'text',
				'placeholder' => esc_attr__( 'Open menu', 'bricksextras' ),
				'inline'      => true,
			);

			$this->controls['buttonText'] = array(
				'tab'    => 'content',
				'label'  => esc_html__( 'Button text', 'bricks' ),
				'type'   => 'text',
				'inline' => true,
			);

			$this->controls['text_padding'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Text padding', 'bricks' ),
				'type'     => 'spacing',
				'css'      => array(
					array(
						'property' => 'padding',
						'selector' => '.x-hamburger-text',
					),
				),
				'required' => array( 'buttonText', '!=', '' ),
			);

			$this->controls['flexDirection'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Direction', 'bricks' ),
				'tooltip'  => array(
					'content'  => 'flex-direction',
					'position' => 'top-left',
				),
				'type'     => 'direction',
				'css'      => array(
					array(
						'property' => 'flex-direction',
						'selector' => '',
					),
				),
				'required' => array( 'buttonText', '!=', '' ),
			);

			$this->controls['buttonTextDisplay'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Display', 'bricks' ) . ' (' . esc_html__( 'Button text', 'bricks' ) . ')',
				'type'     => 'select',
				'inline'   => true,
				'options'  => array(
					'block' => 'Block',
					'none'  => 'None',
				),
				'css'      => array(
					array(
						'property' => 'display',
						'selector' => '.x-hamburger-text',
					),
				),
				'required' => array( 'buttonText', '!=', '' ),
			);
	}




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

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-burger', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'burgertrigger' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-burger', BRICKSEXTRAS_URL . 'components/assets/css/burgertrigger.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

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

		$animation_class = isset( $this->settings['burger_animation'] ) ? esc_attr( $this->settings['burger_animation'] ) : '';
		$aria_label      = isset( $this->settings['aria_label'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['aria_label'] ) ) : esc_attr__( 'Open menu', 'bricksextras' );
		$button_text     = isset( $this->settings['buttonText'] ) ? wp_kses_post( bricks_render_dynamic_data( $this->settings['buttonText'] ) ) : '';

		if ( '' === $button_text ) {
			$this->set_attribute( '_root', 'aria-label', $aria_label );
		}

		$this->set_attribute( 'x-hamburger-box', 'class', 'x-hamburger-box ' . $animation_class );
		$this->set_attribute( 'x-hamburger-inner', 'class', 'x-hamburger-inner' );
		$this->set_attribute( 'x-hamburger-text', 'class', 'x-hamburger-text' );

		$output = "<button {$this->render_attributes( '_root' )}>";

		$output .= "<span {$this->render_attributes( 'x-hamburger-box' )}>";
		$output .= "<span {$this->render_attributes( 'x-hamburger-inner' )}></span>";
		$output .= '</span>';
		$output .= $button_text ? "<span {$this->render_attributes( 'x-hamburger-text' )}>" . $button_text . '</span>' : '';
		$output .= '</button>';

		echo $output;
	}

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

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

			<component
					is="button"
					@click="is_active = !is_active"
			>
				<span class="x-hamburger-box"
					:class="settings.burger_animation + ' ' + (is_active ? 'is-active' : '')"  
				>
					<span class="x-hamburger-inner"></span>
				</span>
				<contenteditable
					v-if="settings.buttonText"
					tag="span"
					class="x-hamburger-text"
					:name="name"
					controlKey="buttonText"
					toolbar="style"
					:settings="settings"
				/>	

			</component>

		</script>

		<?php
	}
}