<?php 

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

class X_Burger_Trigger extends \Bricks\Element {

  // Element properties
  	public $category     = 'extras';
	public $name         = 'xburgertrigger';
	public $icon         = 'ti-menu';
	public $css_selector = '';

	// Methods: Builder-specific
	public function get_label() {
		return esc_html__( 'Burger Trigger', 'bricksextras' );
	}

	public function get_keywords() {
    	return [ 'burger trigger', 'toggle', 'trigger', 'button' ];
  	}

	public function set_control_groups() {
		 $css_added = false;
	}

	public function set_controls() {

		$animations_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'] = [
			'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'] = [
			'tab' => 'content',
			'label' => esc_html__( 'Scale', 'bricks' ),
			'type' => 'number',
			'min' => 0,
			'max' => 1,
			'step' => '0.01', // Default: 1
			'inline' => true,
			'css' => [
				[
				'property' => '--x-burger-size',
				'selector' => '.x-hamburger-box',
				],
			],
			'placeholder' => esc_html__( '0.8', 'bricksextras' ),
		  ];

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

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

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


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

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

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

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

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

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

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

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

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

		  

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

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

	}

	

	// Methods: Frontend-specific
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		  }

		wp_enqueue_script( 'x-burger', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybeMinifyScripts('burgertrigger') . '.js', '', \BricksExtras\Plugin::VERSION, true );
		if (! \BricksExtras\Helpers::elementCSSAdded($this->name) ) {
			wp_enqueue_style( 'x-burger', BRICKSEXTRAS_URL . 'components/assets/css/burgertrigger.css', [], \BricksExtras\Plugin::VERSION );
		  }
	}

	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($this->settings['aria_label']) : esc_attr__('Open menu', 'bricksextras');
		$buttonText = isset( $this->settings['buttonText'] ) ? esc_attr($this->settings['buttonText']) : '';

		if ('' === $buttonText) {
			$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 .= $buttonText ? "<span {$this->render_attributes( 'x-hamburger-text' )}>" . $buttonText . "</span>" : "";
		$output .= "</button>";

		echo $output;

	}

  	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 }

}