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

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

/**
 * Tabs element class.
 */
class X_Tabs extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xtabs';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-tab';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xTabs' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

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

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

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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

		wp_enqueue_script( 'x-tabs', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'tabs' ) . '.js', array( 'x-frontend' ), \BricksExtras\Plugin::VERSION, true );
	}

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

		$this->control_groups['tabsList'] = array(
			'title' => esc_html__( 'Tabs', 'bricks' ) . ' (' . esc_html__( 'List', 'bricks' ) . ')',
		);

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

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

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

		$this->control_groups['mobileAccordion'] = array(
			'title' => esc_html__( 'Accordion', 'bricks' ),
		);

		$this->control_groups['config'] = array(
			'title' => esc_html__( 'Hash', 'bricksextras' ) . ' / ' . esc_html__( 'Scroll to', 'bricks' ),
		);
	}

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

		// tabs list.

		$this->controls['tabWidth'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Width', 'bricks' ) . ' (' . esc_html__( 'Tab', 'bricks' ) . ')',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'selector' => '.x-tabs_tab',
					'property' => 'width',
				),
			),
		);

		$this->controls['tabEqualWidth'] = array(
			'group' => 'tabsList',
			'tab'   => 'content',
			'label' => esc_html__( 'Flex grow', 'bricks' ),
			'type'  => 'checkbox',
			'css'   => array(
				array(
					'selector' => '.x-tabs_tab',
					'property' => 'flex-grow',
					'value'    => '1',
				),
			),
		);

		$this->controls['tabsGap'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Gap', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'gap',
					'selector' => '.x-tabs_list',
				),
			),
		);

		$this->controls['tabWap'] = array(
			'group'   => 'tabsList',
			'tab'     => 'content',
			'label'   => esc_html__( 'Wrap', 'bricks' ) . ' / ' . esc_html__( 'Scroll', 'bricks' ),
			'inline'  => true,
			'type'    => 'select',
			'options' => array(
				'nowrap' => esc_html__( 'No wrap', 'bricks' ),
				'wrap'   => esc_html__( 'Wrap', 'bricks' ),
				'scroll' => esc_html__( 'Scroll', 'bricks' ) . ' (' . esc_html__( 'Horizontal', 'bricks' ) . ')',
			),
		);

		$this->controls['tabPadding'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-tabs_tab',
				),
			),
		);

		$this->controls['tabAlign'] = array(
			'tab'   => 'style',
			'group' => 'tabsList',
			'label' => esc_html__( 'Align', 'bricks' ) . ' (' . esc_html__( 'Tab', 'bricks' ) . ')',
			'type'  => 'align-items',
			'css'   => array(
				array(
					'selector' => '.x-tabs_tab',
					'property' => 'align-items',
				),
			),
		);

		$this->controls['tabsAlign'] = array(
			'tab'   => 'style',
			'group' => 'tabsList',
			'label' => esc_html__( 'Align', 'bricks' ) . ' (' . esc_html__( 'List', 'bricks' ) . ')',
			'type'  => 'justify-content',
			'css'   => array(
				array(
					'selector' => '.x-tabs_list',
					'property' => 'justify-content',
				),
			),
		);

		$this->controls['tabStyledSeparator'] = array(
			'group' => 'tabsList',
			'type'  => 'separator',
		);

		$this->controls['tabBackgroundColor'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Background', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-tabs_tab',
				),
				array(
					'property' => 'background-color',
					'selector' => '.x-tabs_toggle',
				),

			),
		);

		$this->controls['tabBorder'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-tabs_tab',
				),
				array(
					'property' => 'border',
					'selector' => '.x-tabs_toggle',
				),
			),
		);

		$this->controls['tabTypography'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-tabs_tab',
				),
				array(
					'property' => 'font',
					'selector' => '.x-tabs_toggle',
				),
			),
		);

		/* active tab */

		$this->controls['tabActiveSeparator'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Active Tab', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['tabActiveBackgroundColor'] = array(
			'group'   => 'tabsList',
			'label'   => esc_html__( 'Background color', 'bricks' ),
			'type'    => 'color',
			'css'     => array(
				array(
					'property' => 'background-color',
					'selector' => '&:not([data-x-tabs*=animatedTabs]) .x-tabs_tab.x-tabs_tab-selected',
				),
				array(
					'property' => 'background-color',
					'selector' => '.x-tabs_toggle[aria-expanded=true]',
				),
				array(
					'property' => 'background-color',
					'selector' => '.x-tabs_slider',
				),

			),
			'default' => array(
				'hex' => '#dddedf',
			),
		);

		$this->controls['tabActiveBorder'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-tabs_tab.x-tabs_tab-selected',
				),
				array(
					'property' => 'border',
					'selector' => '.x-tabs_toggle[aria-expanded=true]',
				),
			),
		);

		$this->controls['tabActiveTypography'] = array(
			'group' => 'tabsList',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-tabs_tab.x-tabs_tab-selected',
				),
				array(
					'property' => 'font',
					'selector' => '.x-tabs_toggle[aria-expanded=true]',
				),
			),
		);

		// tab content.

		$this->controls['contentPadding'] = array(
			'group' => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-tabs_panel-content',
				),
			),
		);

		$this->controls['contentTypography'] = array(
			'group' => 'content',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-tabs_panel',
				),
			),
		);

		$this->controls['contentBackgroundColor'] = array(
			'group' => 'content',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '&:not([data-x-tabs*=adaptiveHeight]) .x-tabs_panel',
				),
				array(
					'property' => 'background-color',
					'selector' => '&[data-x-tabs*=adaptiveHeight].x-tabs-mobile .x-tabs_panel',
				),
				array(
					'property' => 'background-color',
					'selector' => '&[data-x-tabs*=adaptiveHeight]:not(.x-tabs-mobile) .x-tabs_content',
				),

			),
		);

		$this->controls['contentBorder'] = array(
			'group' => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '&:not([data-x-tabs*=adaptiveHeight]) .x-tabs_panel',
				),
				array(
					'property' => 'border',
					'selector' => '&[data-x-tabs*=adaptiveHeight].x-tabs-mobile .x-tabs_panel',
				),
				array(
					'property' => 'border',
					'selector' => '&[data-x-tabs*=adaptiveHeight]:not(.x-tabs-mobile) .x-tabs_content',
				),
			),
		);

		/* behaviour */

		$this->controls['hoverSelect'] = array(
			'group'    => 'behaviour',
			'tab'      => 'content',
			'rerender' => false,
			'label'    => esc_html__( 'Tab selection on hover', 'bricksextras' ),
			'type'     => 'checkbox',
		);

		$this->controls['tabUnselect'] = array(
			'group'    => 'behaviour',
			'tab'      => 'content',
			'rerender' => false,
			'label'    => esc_html__( 'Allow keyboard navigation to inactive tabs', 'bricksextras' ),
			'type'     => 'checkbox',
		);

		$this->controls['forceResize'] = array(
			'group'    => 'behaviour',
			'tab'      => 'content',
			'rerender' => false,
			'label'    => esc_html__( 'Force window resize when opened', 'bricksextras' ),
			'type'     => 'checkbox',
		);

		$this->controls['adaptiveHeight'] = array(
			'group' => 'behaviour',
			'tab'   => 'content',
			'label' => esc_html__( 'Adaptive height', 'bricks' ),
			'type'  => 'checkbox',
		);

		$this->controls['adaptiveHeightDuration'] = array(
			'group'       => 'behaviour',
			'tab'         => 'content',
			'type'        => 'number',
			'units'       => true,
			'label'       => esc_html__( 'Duration', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-tabs-adaptive-height-duration',
					'selector' => '',
				),
			),
			'placeholder' => '300ms',

		);

		$this->controls['tabOrientation'] = array(
			'group'       => 'behaviour',
			'tab'         => 'content',
			'rerender'    => false,
			'inline'      => true,
			'label'       => esc_html__( 'Orientation', 'bricksextras' ),
			'description' => esc_html__( 'Switch the keyboard navigration to use Up/Down for vertical tabs', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'horizontal' => esc_html__( 'Horizontal', 'bricks' ),
				'vertical'   => esc_html__( 'Vertical', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Horizontal', 'bricks' ),
		);

		/* animation */

		$this->controls['animateTabSep'] = array(
			'group' => 'animation',
			'label' => esc_html__( 'Tabs', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['animatedTabs'] = array(
			'group'    => 'animation',
			'tab'      => 'content',
			'rerender' => true,
			'label'    => esc_html__( 'Animation', 'bricks' ) . ' (' . esc_html__( 'Active tab', 'bricks' ) . ')',
			'type'     => 'checkbox',
		);

		$this->controls['animationSlideDuration'] = array(
			'group'       => 'animation',
			'tab'         => 'content',
			'type'        => 'number',
			'units'       => true,
			'label'       => esc_html__( 'Animation duration', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-tabs-slider-duration',
					'selector' => '',
				),
			),
			'placeholder' => '300ms',
		);

		$this->controls['animationSlideBackgroundColor'] = array(
			'group' => 'animation',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-tabs_list .x-tabs_slider',
				),

			),
		);

		$this->controls['animationSlideBorder'] = array(
			'group' => 'animation',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-tabs_list .x-tabs_slider',
				),
			),
		);

		$this->controls['animateTabContentSep'] = array(
			'group' => 'animation',
			'label' => esc_html__( 'Tab content', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['animateTabContent'] = array(
			'group'       => 'animation',
			'tab'         => 'content',
			'label'       => esc_html__( 'Animation', 'bricks' ),
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'fadeinnonne_x' => esc_html__( 'None', 'bricks' ),
				'fadein_x'      => esc_html__( 'Fade in', 'bricks' ),
				'fadeinup_x'    => esc_html__( 'Fade in up', 'bricks' ),
				'fadeindown_x'  => esc_html__( 'Fade in down', 'bricks' ),
				'fadeinleft_x'  => esc_html__( 'Fade in left', 'bricks' ),
				'fadeinright_x' => esc_html__( 'Fade in right', 'bricks' ),

			),
			'placeholder' => esc_html__( 'None', 'bricks' ),
		);

			$this->controls['animationDuration'] = array(
				'group'       => 'animation',
				'tab'         => 'content',
				'rerender'    => false,
				'type'        => 'number',
				'units'       => true,
				'label'       => esc_html__( 'Animation duration', 'bricks' ),
				'css'         => array(
					array(
						'property' => '--x-tabs-transition-duration',
						'selector' => '',
					),
				),
				'placeholder' => '300ms',

			);

			$this->controls['animationDistance'] = array(
				'group'       => 'animation',
				'tab'         => 'content',
				'type'        => 'number',
				'units'       => true,
				'label'       => esc_html__( 'Distance', 'bricks' ),
				'css'         => array(
					array(
						'property' => '--x-tabs-transition-distance',
						'selector' => '',
					),
				),
				'placeholder' => '10px',
			);

			/* mobile accordion */

			$breakpoint_options = array();

			foreach ( \Bricks\Breakpoints::$breakpoints as $breakpoint ) {
				$breakpoint_options[ $breakpoint['width'] ] = $breakpoint['label'] . ' ( <= ' . ( intval( $breakpoint['width'] ) ) . 'px )';
			}

			$breakpoint_options['none'] = 'None';

			$third_breakpoint = array_keys( $breakpoint_options )[2];

			$this->controls['accordionBreakpoint'] = array(
				'group'   => 'mobileAccordion',
				'type'    => 'select',
				'label'   => esc_html__( 'Breakpoint', 'bricks' ) . ' (' . esc_html__( 'Accordion', 'bricks' ) . ')',
				'options' => $breakpoint_options,
				'default' => $third_breakpoint,
				'inline'  => true,
			);

			$this->controls['allowMultipleExpanded'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Disable closing sibling items', 'bricksextras' ),
				'type'  => 'checkbox',
			);

			$this->controls['expandFirstItem'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Expand first item', 'bricks' ),
				'type'  => 'checkbox',
			);

			$this->controls['disableBricksAnimations'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Disable Bricks animations in content', 'bricksextras' ),
				'type'  => 'checkbox',
			);

			$this->controls['duration'] = array(
				'group'       => 'mobileAccordion',
				'label'       => esc_html__( 'Duration', 'bricks' ) . ' (ms)',
				'type'        => 'number',
				'placeholder' => 150,
			);

			$this->controls['accordionItemsGap'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Gap', 'bricks' ),
				'type'  => 'number',
				'units' => true,
				'css'   => array(
					array(
						'property' => 'gap',
						'selector' => '.x-tabs_content-accordion',
					),
				),
			);

			$this->controls['accordionToggleSep'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Toggle', 'bricks' ) . ' (' . esc_html__( 'Accordion', 'bricks' ) . ')',
				'type'  => 'separator',
			);

			$this->controls['accordionToggleBackgroundColor'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Background color', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => '.x-tabs_content-item .x-tabs_toggle',
					),

				),
			);

			$this->controls['accordionToggleBorder'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Border', 'bricks' ),
				'type'  => 'border',
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => '.x-tabs_content-item .x-tabs_toggle',
					),
				),
			);

			$this->controls['accordionToggleTypography'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'type'  => 'typography',
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-tabs_content-item .x-tabs_toggle',
					),
				),
			);

			$this->controls['iconTransformSep'] = array(
				'group' => 'mobileAccordion',
				'type'  => 'separator',
			);

			$this->controls['iconTransform'] = array(
				'tab'     => 'style',
				'group'   => 'mobileAccordion',
				'type'    => 'transform',
				'label'   => esc_html__( 'Icon transform', 'bricks' ),
				'css'     => array(
					array(
						'selector' => '.x-tabs_toggle-icon',
						'property' => 'transform',
					),
				),
				'default' => array(
					'rotateX' => '0deg',
				),
				'inline'  => true,
				'small'   => true,
			);

			$this->controls['iconTypography'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Icon typography', 'bricks' ),
				'type'  => 'typography',
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-tabs_toggle-icon',
					),
				),
			);

			$this->controls['accordionTogglePaddingSep'] = array(
				'group' => 'mobileAccordion',
				'type'  => 'separator',
			);

			$this->controls['accordionTogglePadding'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Padding', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'padding',
						'selector' => '.x-tabs_toggle',
					),
				),
			);

			$this->controls['accordionToggleAlign'] = array(
				'tab'   => 'style',
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Align items', 'bricks' ),
				'type'  => 'align-items',
				'css'   => array(
					array(
						'selector' => '.x-tabs_toggle',
						'property' => 'align-items',
					),
				),
			);

			$this->controls['accordionToggleJustify'] = array(
				'tab'   => 'style',
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Justify content', 'bricks' ),
				'type'  => 'justify-content',
				'css'   => array(
					array(
						'selector' => '.x-tabs_toggle',
						'property' => 'justify-content',
					),
				),
			);

			$this->controls['accordionToggleActiveSep'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Toggle', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
				'type'  => 'separator',
			);

			$this->controls['accordionToggleActiveBackgroundColor'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Background color', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => '.x-tabs_content-item .x-tabs_toggle[aria-expanded=true]',
					),
				),
			);

			$this->controls['accordionToggleActiveBorder'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Border', 'bricks' ),
				'type'  => 'border',
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => '.x-tabs_content-item .x-tabs_toggle[aria-expanded=true]',
					),
				),
			);

			$this->controls['accordionToggleActiveTypography'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'type'  => 'typography',
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-tabs_content-item .x-tabs_toggle[aria-expanded=true]',
					),
				),
			);

			$this->controls['iconTransformActiveSep'] = array(
				'group' => 'mobileAccordion',
				'type'  => 'separator',
			);

			$this->controls['iconTransformActive'] = array(
				'tab'     => 'style',
				'group'   => 'mobileAccordion',
				'type'    => 'transform',
				'label'   => esc_html__( 'Icon transform', 'bricks' ),
				'css'     => array(
					array(
						'selector' => '.x-tabs_toggle[aria-expanded=true] .x-tabs_toggle-icon',
						'property' => 'transform',
					),
				),
				'default' => array(
					'rotateX' => '180deg',
				),
				'inline'  => true,
				'small'   => true,
			);

			$this->controls['iconTypographyActive'] = array(
				'group' => 'mobileAccordion',
				'label' => esc_html__( 'Icon typography', 'bricks' ),
				'type'  => 'typography',
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-accordion_header[aria-expanded=true] .x-tabs_toggle-icon',
					),
				),
			);

			/* hash */

			$this->controls['hashLink'] = array(
				'label'       => esc_html__( 'Scroll and open tab via URL hash', 'bricksextras' ),
				'type'        => 'checkbox',
				'group'       => 'config',
				'rerender'    => false,
				'description' => '.../#your-tab-panel-id',
				'required'    => array( 'maybeURLparam', '!=', true ),
			);

			$this->controls['scrollOffset'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Scroll offset', 'bricks' ) . ' (px)',
				'type'        => 'number',
				'units'       => false,
				'placeholder' => '0',
				'group'       => 'config',
				'rerender'    => false,
				'required'    => array(
					array( 'hashLink', '=', true ),
					array( 'maybeURLparam', '!=', true ),
				),
			);

			$this->controls['maybeURLparam'] = array(
				'label'       => esc_html__( 'Open via URL parameter', 'bricksextras' ),
				'type'        => 'checkbox',
				'group'       => 'config',
				'rerender'    => false,
				'description' => '.../?key=your-tab-panel-id',
				'required'    => array( 'hashLink', '!=', true ),
			);

			$this->controls['URLParamKey'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Key', 'bricks' ),
				'type'        => 'text',
				'placeholder' => 'tab',
				'inline'      => true,
				'group'       => 'config',
				'rerender'    => false,
				'required'    => array(
					array( 'maybeURLparam', '=', true ),
					array( 'hashLink', '!=', true ),
				),
			);
	}



	/**
	 * Get nestable children.
	 */
	public function get_nestable_children() {
		/**
		 * Get nestable children structure for tabs.
		 */
		return array(
			// Title.
			array(
				'name'      => 'block',
				'label'     => esc_html__( 'Tabs list', 'bricksextras' ),
				'deletable' => false,
				'cloneable' => false,
				'settings'  => array(
					'_direction'  => 'row',
					'_hidden'     => array(
						'_cssClasses' => 'x-tabs_list',
					),
					'tag'         => 'ul',
					'_attributes' => array(
						array(
							'name'  => 'role',
							'value' => 'tablist',
						),
					),
				),
				'children'  => array(
					array(
						'name'     => 'div',
						'label'    => 'Tab Item',
						'settings' => array(
							'tag'         => 'li',
							'_hidden'     => array(
								'_cssClasses' => 'x-tabs_tab',
							),
							'_attributes' => array(
								array(
									'name'  => 'role',
									'value' => 'tab',
								),
							),
						),
						'children' => array(
							array(
								'label'    => 'Title',
								'name'     => 'text-basic',
								'settings' => array(
									'tag'  => 'span',
									'text' => esc_html__( 'Item', 'bricks' ) . ' 1',
								),
							),
						),

					),
					array(
						'name'     => 'div',
						'label'    => 'Tab Item',
						'settings' => array(
							'tag'         => 'li',
							'_hidden'     => array(
								'_cssClasses' => 'x-tabs_tab',
							),
							'_attributes' => array(
								array(
									'name'  => 'role',
									'value' => 'tab',
								),
							),
						),
						'children' => array(
							array(
								'label'    => 'Title',
								'name'     => 'text-basic',
								'settings' => array(
									'tag'  => 'span',
									'text' => esc_html__( 'Item', 'bricks' ) . ' 2',
								),
							),
						),

					),
				),
			),

			// Content.
			array(
				'name'      => 'block',
				'label'     => esc_html__( 'Tabs Content', 'bricksextras' ),
				'deletable' => false,
				'cloneable' => false,
				'settings'  => array(
					'tag'     => 'div',
					'_hidden' => array(
						'_cssClasses' => 'x-tabs_content',
					),
				),
				'children'  => array(

					array(
						'name'     => 'block',
						'label'    => esc_html__( 'Tab Content Item', 'bricksextras' ),
						'settings' => array(
							'tag'     => 'div',
							'_hidden' => array(
								'_cssClasses' => 'x-tabs_content-item',
							),
						),
						'children' => array(
							array(
								'name'      => 'block',
								'label'     => esc_html__( 'Accordion Toggle', 'bricksextras' ),
								'cloneable' => false,
								'settings'  => array(
									'_hidden'     => array(
										'_cssClasses' => 'x-tabs_toggle',
									),
									'_attributes' => array(
										array(
											'name'  => 'role',
											'value' => 'button',
										),
										array(
											'name'  => 'tabindex',
											'value' => '0',
										),
									),
								),
								'children'  => array(
									array(
										'name'     => 'text-basic',
										'settings' => array(
											'text' => 'Item 1',
											'tag'  => 'span',
										),
									),
									array(
										'name'     => 'icon',
										'label'    => esc_html__( 'Toggle icon', 'bricksextras' ),
										'settings' => array(
											'_hidden'  => array(
												'_cssClasses' => 'x-tabs_toggle-icon',
											),
											'icon'     => array(
												'icon'    => 'ion-ios-arrow-down',
												'library' => 'ionicons',
											),
											'iconSize' => '1em',
										),
									),
								),
							),
							array(
								'name'      => 'block',
								'label'     => esc_html__( 'Tab Panel', 'bricksextras' ),
								'deletable' => false,
								'cloneable' => false,
								'settings'  => array(
									'_hidden'     => array(
										'_cssClasses' => 'x-tabs_panel',
									),
									'_attributes' => array(
										array(
											'name'  => 'role',
											'value' => 'tabpanel',
										),
									),
								),
								'children'  => array(
									array(
										'name'      => 'block',
										'label'     => esc_html__( 'Tab Content', 'bricks' ),
										'deletable' => false,
										'cloneable' => false,
										'settings'  => array(
											'_hidden' => array(
												'_cssClasses' => 'x-tabs_panel-content',
											),
										),
										'children'  => array(
											array(
												'name'     => 'heading',
												'settings' => array(
													'text' => 'Item 1',
													'tag'  => 'h4',
												),
											),
											array(
												'name'     => 'text',
												'settings' => array(
													'text' => esc_html__( 'Tab content here', 'bricksextras' ),
												),
											),
										),
									),
								),
							),
						),
					),
					array(
						'name'     => 'block',
						'label'    => esc_html__( 'Tab Content Item', 'bricksextras' ),
						'settings' => array(
							'tag'     => 'div',
							'_hidden' => array(
								'_cssClasses' => 'x-tabs_content-item',
							),
						),
						'children' => array(
							array(
								'name'      => 'block',
								'label'     => esc_html__( 'Accordion Toggle', 'bricksextras' ),
								'cloneable' => false,
								'settings'  => array(
									'_hidden'     => array(
										'_cssClasses' => 'x-tabs_toggle',
									),
									'_attributes' => array(
										array(
											'name'  => 'role',
											'value' => 'button',
										),
										array(
											'name'  => 'tabindex',
											'value' => '0',
										),
									),
								),
								'children'  => array(
									array(
										'name'     => 'text-basic',
										'settings' => array(
											'text' => 'Item 2',
											'tag'  => 'span',
										),
									),
									array(
										'name'     => 'icon',
										'label'    => esc_html__( 'Toggle icon', 'bricksextras' ),
										'settings' => array(
											'_hidden'  => array(
												'_cssClasses' => 'x-tabs_toggle-icon',
											),
											'icon'     => array(
												'icon'    => 'ion-ios-arrow-down',
												'library' => 'ionicons',
											),
											'iconSize' => '1em',
										),
									),
								),
							),
							array(
								'name'      => 'block',
								'label'     => esc_html__( 'Tab Panel', 'bricksextras' ),
								'deletable' => false,
								'cloneable' => false,
								'settings'  => array(
									'_hidden'     => array(
										'_cssClasses' => 'x-tabs_panel',
									),
									'_attributes' => array(
										array(
											'name'  => 'role',
											'value' => 'tabpanel',
										),
									),
								),
								'children'  => array(
									array(
										'name'      => 'block',
										'label'     => esc_html__( 'Tab Content', 'bricks' ),
										'deletable' => false,
										'cloneable' => false,
										'settings'  => array(
											'_hidden' => array(
												'_cssClasses' => 'x-tabs_panel-content',
											),
										),
										'children'  => array(
											array(
												'name'     => 'heading',
												'settings' => array(
													'text' => 'Item 2',
													'tag'  => 'h4',
												),
											),
											array(
												'name'     => 'text',
												'settings' => array(
													'text' => esc_html__( 'Tab content here', 'bricksextras' ),
												),
											),
										),
									),
								),
							),
						),
					),
				),
			),
		);
	}

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

		$settings = $this->settings;

		$config = array(
			'hoverSelect'           => isset( $settings['hoverSelect'] ),
			'accordionBreakpoint'   => isset( $settings['accordionBreakpoint'] ) ? $settings['accordionBreakpoint'] : 'none',
			'closeSibling'          => isset( $settings['closeSibling'] ) ? $settings['closeSibling'] : 'none',
			'allowMultipleExpanded' => isset( $settings['allowMultipleExpanded'] ) ? $settings['allowMultipleExpanded'] : false,
			'duration'              => isset( $settings['duration'] ) ? intval( $settings['duration'] ) : 150,
			'expandFirstItem'       => isset( $settings['expandFirstItem'] ) ? $settings['expandFirstItem'] : false,
			'tabUnselect'           => isset( $settings['tabUnselect'] ) ? $settings['tabUnselect'] : false,
			'tabOrientation'        => isset( $settings['tabOrientation'] ) ? $settings['tabOrientation'] : 'horizontal',
			'hashLink'              => isset( $settings['hashLink'] ) && ! isset( $settings['maybeURLparam'] ),
			'URLparam'              => isset( $settings['maybeURLparam'] ) && ! isset( $settings['hashLink'] ),
			'URLParamKey'           => isset( $settings['URLParamKey'] ) ? bricks_render_dynamic_data( $settings['URLParamKey'] ) : 'tab',
			'scrollOffset'          => isset( $settings['scrollOffset'] ) ? intval( $settings['scrollOffset'] ) : 0,
			'animateTabContent'     => isset( $settings['animateTabContent'] ) ? $settings['animateTabContent'] : 'fadeinnonne_x',
			'resize'                => isset( $settings['forceResize'] ),
		);

		if ( isset( $settings['animatedTabs'] ) ) {
			$config['animatedTabs'] = 'true';
		}

		if ( isset( $settings['disableBricksAnimations'] ) ) {
			$config['disableBricksAnimations'] = 'true';
		}

		if ( isset( $settings['adaptiveHeight'] ) ) {
			$config['adaptiveHeight'] = 'true';
		}

		$tab_wap = isset( $settings['tabWap'] ) ? $settings['tabWap'] : 'wrap';

		$tabs_config = wp_json_encode( $config );
		$this->set_attribute( '_root', 'data-x-tabs', $tabs_config );

		$this->set_attribute( '_root', 'data-x-tab-wrap', esc_attr( $tab_wap ) );

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

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

		$output .= \Bricks\Frontend::render_children( $this );

		$output .= '</div>';

		echo $output;
	}
}
