<?php
/**
 * Popover element.
 *
 * @package BricksExtras
 */

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

/**
 * Popover element class.
 */
class X_Popover extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xpopover';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-comment-alt';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xPopover' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;
	/**
	 * Script localized flag.
	 *
	 * @var bool
	 */
	private static $script_localized = false;


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Popover', 'bricksextras' ) . ' / ' . esc_html__( 'Tooltip', 'bricks' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'popover', 'tooltip', 'info' );
	}

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

		$this->control_groups['button'] = array(
			'title' => esc_html__( 'Button', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['content'] = array(
			'title' => esc_html__( 'Content', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['behaviour'] = array(
			'title' => esc_html__( 'Behavior', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['animation'] = array(
			'title' => esc_html__( 'Animation', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['advanced'] = array(
			'title' => esc_html__( 'Tooltips', 'bricksextras' ),
			'tab'   => 'content',
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

		if ( ! self::$script_localized ) {

			wp_localize_script(
				'x-popover',
				'xTippy',
				array(
					'Instances' => array(),
				)
			);

			self::$script_localized = true;

		}

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

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

		$this->controls['ariaLabel'] = array(
			'tab'            => 'content',
			'label'          => 'aria-label',
			'group'          => 'button',
			'type'           => 'text',
			'inline'         => true,
			'default'        => 'More information',
			'hasDynamicData' => false,
		);

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

		$this->controls['icon'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Icon', 'bricks' ),
			'group'   => 'button',
			'type'    => 'icon',
			'css'     => array(
				array(
					'selector' => '.x-popover_button-icon svg',
				),
			),
			'default' => array(
				'icon'    => 'fas fa-circle-info',
				'library' => 'fontawesomeSolid',
			),
		);

		$this->controls['iconTypography'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Icon typography', 'bricks' ),
			'type'  => 'typography',
			'group' => 'button',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-popover_button-icon',
				),
			),
		);

		$button = '.x-popover_button';

		$this->controls['buttonTypography'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $button,
				),
			),
		);

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

		$this->controls['buttonBorder'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonBoxShadow'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => $button,
				),
			),
		);

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

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

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

		$this->controls['buttonDirection'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Direction', 'bricks' ),
			'group'    => 'button',
			'tooltip'  => array(
				'content'  => 'flex-direction',
				'position' => 'top-left',
			),
			'type'     => 'direction',
			'css'      => array(
				array(
					'property' => 'flex-direction',
					'selector' => $button,
				),
			),
			'inline'   => true,
			'rerender' => true,
		);

		$this->controls['buttonJustifyContent'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Align main axis', 'bricks' ),
			'group'   => 'button',
			'tooltip' => array(
				'content'  => 'justify-content',
				'position' => 'top-left',
			),
			'type'    => 'justify-content',
			'css'     => array(
				array(
					'property' => 'justify-content',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonAlignItems'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Align cross axis', 'bricks' ),
			'group'   => 'button',
			'tooltip' => array(
				'content'  => 'align-items',
				'position' => 'top-left',
			),
			'type'    => 'align-items',
			'css'     => array(
				array(
					'property' => 'align-items',
					'selector' => $button,
				),
			),
		);

		$this->controls['_columnGap'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Column gap', 'bricks' ),
			'group' => 'button',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'column-gap',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonRowGap'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Row gap', 'bricks' ),
			'group' => 'button',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'row-gap',
					'selector' => $button,
				),
			),
		);

		/*  popover style */

		$popover = '.x-popover_content .tippy-content';

		$this->controls['popoverWidth'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Width', 'bricks' ),
			'inline' => true,
			'group'  => 'content',
			'type'   => 'number',
			'units'  => true,
			'css'    => array(
				array(
					'selector' => $popover,
					'property' => 'width',
				),
			),
		);

		$this->controls['popoverTypography'] = array(
			'tab'      => 'content',
			'group'    => 'content',
			'type'     => 'typography',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'rerender' => false,
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $popover,
				),
			),
		);

		$this->controls['popoverBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'content',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => '--x-popover-background',
					'selector' => '',
				),
			),
		);

		$this->controls['popoverBorder'] = array(
			'tab'      => 'content',
			'group'    => 'content',
			'type'     => 'border',
			'rerender' => false,
			'label'    => esc_html__( 'Border', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $popover,
				),
			),
		);

		$this->controls['popoverBoxShadow'] = array(
			'tab'      => 'content',
			'group'    => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'rerender' => false,
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $popover,
				),
			),
		);

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

		$this->controls['popoverPadding'] = array(
			'tab'   => 'content',
			'group' => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => $popover,
				),
			),
		);

		/* animation */

		$this->controls['popoverTransitionIn'] = array(
			'tab'         => 'content',
			'group'       => 'animation',
			'label'       => esc_html__( 'Transition', 'bricks' ) . ' (' . esc_html__( 'Show', 'bricks' ) . ')',
			'css'         => array(
				array(
					'property' => '--x-popover-transitionin',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '300',
			'inline'      => true,
			'unit'        => 'ms',
		);

		$this->controls['popoverTransitionOut'] = array(
			'tab'         => 'content',
			'group'       => 'animation',
			'label'       => esc_html__( 'Transition', 'bricks' ) . ' (' . esc_html__( 'Hide', 'bricks' ) . ')',
			'css'         => array(
				array(
					'property' => '--x-popover-transitionout',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '300',
			'unit'        => 'ms',
			'inline'      => true,
		);

		$this->controls['popoverTranslateX'] = array(
			'tab'         => 'content',
			'group'       => 'animation',
			'label'       => esc_html__( 'Translate X', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-popover-translatex',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '0',
			'inline'      => true,
			'units'       => array(
				'px' => array(
					'min'  => 1,
					'max'  => 1000,
					'step' => 1,
				),
			),
		);

		$this->controls['popoverTranslateY'] = array(
			'tab'         => 'content',
			'group'       => 'animation',
			'label'       => esc_html__( 'Translate Y', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-popover-translatey',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '10',
			'inline'      => true,
			'units'       => array(
				'px' => array(
					'min'  => 1,
					'max'  => 1000,
					'step' => 1,
				),
			),
		);

		$this->controls['popoverScale'] = array(
			'tab'         => 'content',
			'group'       => 'animation',
			'label'       => esc_html__( 'Scale', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-popover-scale',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '0.95',
			'inline'      => true,
		);

		/* behaviour */

		$this->controls['placement'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Preferred placement', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'behaviour',
			'options'     => array(
				'top'          => esc_html__( 'Top', 'bricks' ),
				'right'        => esc_html__( 'Right', 'bricks' ),
				'bottom'       => esc_html__( 'Bottom', 'bricks' ),
				'left'         => esc_html__( 'Left', 'bricks' ),
				'auto'         => esc_html__( 'Auto', 'bricks' ) . ' (' . esc_html__( 'Where there is enough space', 'bricksextras' ) . ')',
				'auto-start'   => esc_html__( 'Auto Start', 'bricksextras' ),
				'auto-end'     => esc_html__( 'Auto End', 'bricksextras' ),
				'top-start'    => esc_html__( 'Top Start', 'bricksextras' ),
				'top-end'      => esc_html__( 'Top End', 'bricksextras' ),
				'right-start'  => esc_html__( 'Right Start', 'bricksextras' ),
				'right-end'    => esc_html__( 'Right End', 'bricksextras' ),
				'bottom-start' => esc_html__( 'Bottom Start', 'bricksextras' ),
				'bottom-end'   => esc_html__( 'Bottom End', 'bricksextras' ),
				'left-start'   => esc_html__( 'Left Start', 'bricksextras' ),
				'left-end'     => esc_html__( 'Left End', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Auto', 'bricks' ) . ' (' . esc_html__( 'Where there is enough space', 'bricksextras' ) . ')',
			'clearable'   => false,
		);

		$this->controls['interaction'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Trigger', 'bricks' ),
			'type'        => 'select',
			'group'       => 'behaviour',
			'options'     => array(
				'mouseenter focus' => 'mouseenter & focus',
				'click'            => 'click (default)',
				'mouseenter click' => 'mouseenter & click',
			),
			'inline'      => true,
			'placeholder' => 'click (default)',
			'clearable'   => false,
		);

		$this->controls['delay'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'label'       => esc_html__( 'Delay', 'bricks' ) . ' (ms)',
			'type'        => 'number',
			'placeholder' => '0',
			'units'       => false,
			'small'       => true,
		);

		$this->controls['offsetSkidding'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'label'       => esc_html__( 'Offset skidding', 'bricksextras' ) . '  (px)',
			'info'        => esc_html__( 'Distance along the side of the button', 'bricksextras' ),
			'type'        => 'number',
			'placeholder' => '0',
			'units'       => false,
			'small'       => true,
		);

		$this->controls['offsetDistance'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'label'       => esc_html__( 'Offset distance', 'bricksextras' ) . '  (px)',
			'info'        => esc_html__( 'Distance away from the button', 'bricksextras' ),
			'type'        => 'number',
			'placeholder' => '10',
			'units'       => false,
			'small'       => true,
		);

		$this->controls['moveTransition'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'label'       => esc_html__( 'Transition', 'bricks' ) . ' (ms)',
			'type'        => 'number',
			'placeholder' => '50',
			'units'       => false,
			'small'       => true,
		);

		$this->controls['appendBody'] = array(
			'tab'   => 'content',
			'group' => 'behaviour',
			'label' => esc_html__( 'Append to body', 'bricksextras' ),
			'type'  => 'checkbox',
		);

		/* advanced */

		$this->controls['advancedSep'] = array(
			'tab'         => 'content',
			'group'       => 'advanced',
			'type'        => 'separator',
			'description' => esc_html__( 'Popover can be used to add tooltips to any elements. The tooltip content will either be the content you nest inside this popover, or you can add text directly to the elements in style > tooltip settings', 'bricksextras' ),
		);

		$this->controls['maybeTooltip'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'group'  => 'advanced',
			'label'  => esc_html__( 'Use as tooltip', 'bricksextras' ),
			'type'   => 'checkbox',
		);

		$this->controls['elementSelector'] = array(
			'tab'            => 'content',
			'type'           => 'text',
			'group'          => 'advanced',
			'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Element', 'bricks' ) . ')',
			'placeholder'    => '.your-class-here',
			'hasDynamicData' => false,
			'info'           => esc_html__( 'The selector of the target elements', 'bricksextras' ),
			'inline'         => true,
			'required'       => array( 'maybeTooltip', '=', true ),
		);

		$this->controls['maybeDynamicContent'] = array(
			'tab'      => 'content',
			'inline'   => true,
			'small'    => true,
			'group'    => 'advanced',
			'info'     => esc_html__( 'If wishing to dynamically add content from each elements tooltip settings. Disable if nesting elements to display instead.', 'bricksextras' ),
			'label'    => esc_html__( 'Dynamic tooltip text', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'maybeTooltip', '=', true ),
		);

		$this->controls['multipleTriggers'] = array(
			'tab'      => 'content',
			'inline'   => true,
			'small'    => true,
			'group'    => 'advanced',
			'label'    => esc_html__( 'Multiple triggers for the same tooltip', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'maybeTooltip', '=', true ),
		);

		$this->controls['followCursor'] = array(
			'tab'         => 'content',
			'group'       => 'advanced',
			'label'       => esc_html__( 'Follow cursor', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'false'      => esc_html__( 'False', 'bricks' ),
				'true'       => esc_html__( 'True', 'bricks' ),
				'horizontal' => esc_html__( 'X axis', 'bricks' ),
				'vertical'   => esc_html__( 'Y axis', 'bricks' ),
				'initial'    => esc_html__( 'Initial', 'bricks' ),
			),
			'placeholder' => 'False',
			'inline'      => true,
			'info'        => esc_html__( 'Only for if not using multiple triggers', 'bricksextras' ),
			'required'    => array(
				array( 'maybeTooltip', '=', true ),
				array( 'multipleTriggers', '=', false ),
			),
		);

		$this->controls['hidebutton'] = array(
			'tab'      => 'content',
			'inline'   => true,
			'small'    => true,
			'group'    => 'advanced',
			'label'    => esc_html__( 'Hide button in builder', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'maybeTooltip', '=', true ),
		);
	}



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

		$icon        = empty( $this->settings['icon'] ) ? false : self::render_icon( $this->settings['icon'] );
		$aria_label  = isset( $this->settings['ariaLabel'] ) ? esc_attr( $this->settings['ariaLabel'] ) : false;
		$button_text = isset( $this->settings['buttonText'] ) ? esc_html( $this->settings['buttonText'] ) : false;

		$config = array(
			'placement'      => isset( $this->settings['placement'] ) ? $this->settings['placement'] : 'auto',
			'offsetSkidding' => isset( $this->settings['offsetSkidding'] ) ? intval( $this->settings['offsetSkidding'] ) : 0,
			'offsetDistance' => isset( $this->settings['offsetDistance'] ) ? intval( $this->settings['offsetDistance'] ) : 10,
			'moveTransition' => isset( $this->settings['moveTransition'] ) ? intval( $this->settings['moveTransition'] ) : 50,
			'interaction'    => isset( $this->settings['interaction'] ) ? $this->settings['interaction'] : 'click',
			'delay'          => isset( $this->settings['delay'] ) ? intval( $this->settings['delay'] ) : 0,
			'followCursor'   => isset( $this->settings['followCursor'] ) ? $this->settings['followCursor'] : 'false',
			'appendBody'     => isset( $this->settings['appendBody'] ),
		);

		if ( isset( $this->settings['maybeTooltip'] ) ) {
			$config += array(
				'elementSelector'  => isset( $this->settings['elementSelector'] ) ? bricks_render_dynamic_data( $this->settings['elementSelector'] ) : '.your-class-here',
				'dynamicContent'   => isset( $this->settings['maybeDynamicContent'] ),
				'multipleTriggers' => isset( $this->settings['multipleTriggers'] ),
			);
		}

		if ( isset( $this->settings['hidebutton'] ) && isset( $this->settings['maybeTooltip'] ) ) {
			$config += array(
				'hide' => true,
			);
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element ) ) {
			$config += array( 'isLooping' => \BricksExtras\Helpers::get_parent_loop_id( $this->element ) );
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) ) {
			$config += array( 'isLoopingComponent' => \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) );
		}

		// Generate and set a unique identifier for this instance.
		$indentifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		$unique_id = $indentifier;

		$this->set_attribute( '_root', 'class', array( 'x-popover' ) );
		$this->set_attribute( '_root', 'data-x-popover', wp_json_encode( $config ) );

		$this->set_attribute( 'x-popover_button', 'class', array( 'x-popover_button' ) );

		$this->set_attribute( 'x-popover_button-icon', 'class', array( 'x-popover_button-icon' ) );

		if ( $aria_label && ! $button_text ) {
			$this->set_attribute( 'x-popover_button', 'aria-label', $aria_label );
		}

		$this->set_attribute( 'x-popover_content', 'class', array( 'x-popover_content' ) );
		$this->set_attribute( 'x-popover_content', 'role', array( 'tooltip' ) );

		$this->set_attribute( 'tippy-content', 'class', array( 'tippy-content' ) );
		$this->set_attribute( 'tippy-content', 'data-state', array( 'visible' ) );

		$this->set_attribute( 'tippy-root', 'data-tippy-root', '' );

		$this->set_attribute( 'tippy-box', 'class', 'tippy-box' );
		$this->set_attribute( 'tippy-box', 'data-state', 'visible' );
		$this->set_attribute( 'tippy-box', 'tabindex', '1' );
		$this->set_attribute( 'tippy-box', 'data-theme', 'extras' );
		$this->set_attribute( 'tippy-box', 'data-animation', 'extras' );

		$this->set_attribute( 'x-popover_content-inner', 'class', array( 'x-popover_content-inner' ) );

		$this->set_attribute( 'x-popover_button', 'aria-describedby', 'x-popover_content_' . $unique_id );
		$this->set_attribute( 'x-popover_content', 'id', 'x-popover_content_' . $unique_id );

		$output = '';

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

		/* only output button on front end if not being used as tooltip */
		if ( ( \BricksExtras\Helpers::maybe_preview() || ! isset( $this->settings['maybeTooltip'] ) ) ) {

			$output .= "<button {$this->render_attributes( 'x-popover_button' )}>";
			$output .= "<span {$this->render_attributes( 'x-popover_button-icon' )}> " . $icon . '  </span>';

			if ( $button_text ) {
				$output .= "<span {$this->render_attributes( 'x-popover_button-text' )}> " . esc_html( $this->settings['buttonText'] ) . '  </span>';
			}
			$output .= '</button>';

		}

		$output .= "<div {$this->render_attributes( 'x-popover_content' )}>";

		if ( BricksExtras\Helpers::maybe_preview() ) {
			$output .= "<div {$this->render_attributes( 'tippy-root' )}>";
			$output .= "<div {$this->render_attributes( 'tippy-box' )}>";
			$output .= "<div {$this->render_attributes( 'tippy-content' )}>";
		}
		$output .= "<div {$this->render_attributes( 'x-popover_content-inner' )}>";

		if ( method_exists( '\Bricks\Frontend', 'render_children' ) ) {
			$output .= \Bricks\Frontend::render_children( $this );
		}

		$output .= '</div>';
		if ( BricksExtras\Helpers::maybe_preview() ) {
			$output .= '</div>';
			$output .= '</div>';
			$output .= '</div>';
		}
		$output .= '</div>';

		$output .= '</div>';

		echo $output;
	}


	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {
		return array(
			'name'     => 'text',
			'label'    => esc_html__( 'Popover content', 'bricksextras' ),
			'settings' => array(
				'text' => esc_html__( 'Popover content', 'bricksextras' ),
			),
		);
	}

	/**
	 * Get nestable children.
	 */
	public function get_nestable_children() {
		return \BricksExtras\Helpers::get_nestable_children_helper( $this, 1 );
	}
}
