<?php
/**
 * Pro Accordion element.
 *
 * @package BricksExtras
 */

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

/**
 * Pro Accordion element class.
 */
class X_Pro_Accordion extends \Bricks\Element {
	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xproaccordion';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-list-post';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xProAccordion' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

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

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

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {
		$this->control_groups['items'] = array(
			'title' => esc_html__( 'Items', 'bricks' ),
		);
		$this->control_groups['title'] = array(
			'title' => esc_html__( 'Header', 'bricks' ),
		);

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

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

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

		$this->control_groups['conditional'] = array(
			'title'    => esc_html__( 'Conditional accordion', 'bricksextras' ),
			'required' => array( 'maybeConditional', '=', true ),
		);
	}

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

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

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

		$this->controls['_children'] = array(
			'type'          => 'repeater',
			'group'         => 'items',
			'titleProperty' => 'label',
			'items'         => 'children',
		);

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

		$this->controls['expandAll'] = array(
			'label' => esc_html__( 'Expand all', 'bricks' ),
			'type'  => 'checkbox',
		);

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

		$this->controls['hashLink'] = array(
			'label'       => esc_html__( 'Open on hash link', 'bricksextras' ),
			'type'        => 'checkbox',
			'group'       => 'config',
			'description' => esc_html__( 'Open and scroll to accordion item if URL hash matches accordion item ID', 'bricksextras' ),
		);

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

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

		$this->controls['itemGap'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Gap', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'gap',
					'selector' => '',
				),
			),
			'placeholder' => '0',
		);

		$this->controls['tag'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'HTML tag', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'div'    => 'div',
				'ul'     => 'ul',
				'ol'     => 'ol',
				'custom' => 'custom',
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => 'div',
		);

		$this->controls['customTag'] = array(
			'label'          => esc_html__( 'Custom tag', 'bricks' ),
			'type'           => 'text',
			'inline'         => true,
			'hasDynamicData' => false,
			'placeholder'    => 'div',
			'required'       => array( 'tag', '=', 'custom' ),
		);

		$this->controls['faqSchema'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'FAQ schema', 'bricks' ),
			'type'   => 'checkbox',
			'inline' => true,
		);

		/* conditional */

		$this->controls['maybeConditional'] = array(
			'label' => esc_html__( 'Conditional accordion', 'bricksextras' ),
			'type'  => 'checkbox',
		);

		$this->controls['navKeys'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Skip to next item with up/down keys', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
		);

		// TITLE.

		$this->controls['titleMargin'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => '.x-accordion_header',
				),
			),
		);

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

		$this->controls['titleHeight'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Min. height', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'min-height',
					'selector' => '.x-accordion_header',
				),
			),
		);

		$this->controls['titleBackgroundColor'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-accordion_header',
				),
			),
		);

		$this->controls['titleBorder'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-accordion_header',
				),
			),
		);

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

		// ACTIVE TITLE.

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

		$this->controls['titleActiveBackgroundColor'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-accordion_header[aria-expanded=true]',
				),
			),
		);

		$this->controls['titleActiveBorder'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-accordion_header[aria-expanded=true]',
				),
			),
		);

		$this->controls['titleActiveTypography'] = array(
			'group' => 'title',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-accordion_header[aria-expanded=true]',
				),
			),
		);

		// CONTENT.

		$this->controls['contentPadding'] = array(
			'group'       => 'content',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => '.x-accordion_content-inner',
				),
			),
			'placeholder' => array(
				'top'    => 15,
				'right'  => 15,
				'bottom' => 15,
				'left'   => 15,
			),
		);

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

		$this->controls['contentBorder'] = array(
			'group' => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-accordion_content',
				),
			),
		);

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

		/* icon */

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

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

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

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

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

		$this->controls['removeAccordion'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Remove accordion behavior at this breakpoint', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'conditional',
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'placeholder' => esc_html__( 'False', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-disable-accordion',
					'selector' => '',
				),
				array(
					'property' => 'display',
					'selector' => '.x-accordion_content',
					'value'    => 'flex',
					'required' => 'true',
				),
				array(
					'property' => 'display',
					'selector' => '.x-accordion_content',
					'value'    => 'none',
					'required' => 'false',
				),
				array(
					'property' => 'display',
					'selector' => '.x-accordion_icon',
					'value'    => 'none',
					'required' => 'true',
				),
				array(
					'property' => 'display',
					'selector' => '.x-accordion_icon',
					'value'    => 'inline-block',
					'required' => 'false',
				),
			),
		);

		// Display.

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

		$this->controls['conditional_display'] = array(
			'group'     => 'conditional',
			'label'     => esc_html__( 'Display', 'bricks' ),
			'type'      => 'select',
			'options'   => array(
				'flex'         => 'flex',
				'grid'         => 'grid',
				'block'        => 'block',
				'inline-block' => 'inline-block',
				'inline'       => 'inline',
				'none'         => 'none',
			),
			'add'       => true,
			'inline'    => true,
			'lowercase' => true,
			'css'       => array(
				array(
					'property' => 'display',
					'selector' => '',
				),
				array(
					'selector' => '',
					'property' => 'align-items',
					'value'    => 'initial',
					'required' => 'grid',
				),
			),
		);

		// Display: grid.

		$this->controls['conditional_gridGap'] = array(
			'group'       => 'conditional',
			'label'       => esc_html__( 'Gap', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'grid-gap',
					'selector' => '',
				),
			),
			'placeholder' => '',
			'required'    => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_gridTemplateColumns'] = array(
			'group'          => 'conditional',
			'label'          => esc_html__( 'Grid template columns', 'bricks' ),
			'type'           => 'text',
			'tooltip'        => array(
				'content'  => 'grid-template-columns',
				'position' => 'top-left',
			),
			'hasDynamicData' => false,
			'css'            => array(
				array(
					'property' => 'grid-template-columns',
					'selector' => '',
				),
			),
			'placeholder'    => '',
			'required'       => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_gridTemplateRows'] = array(
			'group'          => 'conditional',
			'label'          => esc_html__( 'Grid template rows', 'bricks' ),
			'type'           => 'text',
			'tooltip'        => array(
				'content'  => 'grid-template-rows',
				'position' => 'top-left',
			),
			'hasDynamicData' => false,
			'css'            => array(
				array(
					'property' => 'grid-template-rows',
					'selector' => '',
				),
			),
			'placeholder'    => '',
			'required'       => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_gridAutoColumns'] = array(
			'group'          => 'conditional',
			'label'          => esc_html__( 'Grid auto columns', 'bricks' ),
			'type'           => 'text',
			'tooltip'        => array(
				'content'  => 'grid-auto-columns',
				'position' => 'top-left',
			),
			'hasDynamicData' => false,
			'css'            => array(
				array(
					'property' => 'grid-auto-columns',
					'selector' => '',
				),
			),
			'required'       => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_gridAutoRows'] = array(
			'group'          => 'conditional',
			'label'          => esc_html__( 'Grid auto rows', 'bricks' ),
			'type'           => 'text',
			'tooltip'        => array(
				'content'  => 'grid-auto-rows',
				'position' => 'top-left',
			),
			'hasDynamicData' => false,
			'css'            => array(
				array(
					'property' => 'grid-auto-rows',
					'selector' => '',
				),
			),
			'required'       => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_gridAutoFlow'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Grid auto flow', 'bricks' ),
			'type'     => 'select',
			'options'  => array(
				'row'    => 'row',
				'column' => 'column',
				'dense'  => 'dense',
			),
			'tooltip'  => array(
				'content'  => 'grid-auto-flow',
				'position' => 'top-left',
			),
			'css'      => array(
				array(
					'property' => 'grid-auto-flow',
					'selector' => '',
				),
			),
			'required' => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_justifyItemsGrid'] = array(
			'group'     => 'conditional',
			'label'     => esc_html__( 'Justify items', 'bricks' ),
			'tooltip'   => array(
				'content'  => 'justify-items',
				'position' => 'top-left',
			),
			'type'      => 'justify-content',
			'direction' => 'row',
			'css'       => array(
				array(
					'property' => 'justify-items',
				),
			),
			'required'  => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_alignItemsGrid'] = array(
			'group'     => 'conditional',
			'label'     => esc_html__( 'Align items', 'bricks' ),
			'tooltip'   => array(
				'content'  => 'align-items',
				'position' => 'top-left',
			),
			'type'      => 'align-items',
			'direction' => 'row',
			'css'       => array(
				array(
					'property' => 'align-items',
				),
			),
			'required'  => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_justifyContentGrid'] = array(
			'group'     => 'conditional',
			'label'     => esc_html__( 'Justify content', 'bricks' ),
			'tooltip'   => array(
				'content'  => 'justify-content',
				'position' => 'top-left',
			),
			'type'      => 'justify-content',
			'direction' => 'row',
			'css'       => array(
				array(
					'property' => 'justify-content',
				),
			),
			'required'  => array( 'conditional_display', '=', 'grid' ),
		);

		$this->controls['conditional_alignContentGrid'] = array(
			'group'     => 'conditional',
			'label'     => esc_html__( 'Align content', 'bricks' ),
			'tooltip'   => array(
				'content'  => 'align-content',
				'position' => 'top-left',
			),
			'type'      => 'align-items',
			'direction' => 'row',
			'css'       => array(
				array(
					'property' => 'align-content',
				),
			),
			'required'  => array( 'conditional_display', '=', 'grid' ),
		);

		// Display: flex.

		// Flex controls.
		$this->controls['conditional_flexWrap'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Flex wrap', 'bricks' ),
			'tooltip'  => array(
				'content'  => 'flex-wrap',
				'position' => 'top-left',
			),
			'type'     => 'select',
			'options'  => array(
				'nowrap'       => esc_html__( 'No wrap', 'bricks' ),
				'wrap'         => esc_html__( 'Wrap', 'bricks' ),
				'wrap-reverse' => esc_html__( 'Wrap reverse', 'bricks' ),
			),
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'flex-wrap',
				),
			),
			'required' => array( 'conditional_display', '=', 'flex' ),
		);

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

		$this->controls['conditional_alignSelf'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Align self', 'bricks' ),
			'tooltip'  => array(
				'content'  => 'align-self',
				'position' => 'top-left',
			),
			'type'     => 'align-items',
			'css'      => array(
				array(
					'property'  => 'align-self',
					'important' => true,
				),
				array(
					'selector' => '',
					'property' => 'width',
					'value'    => '100%',
					'required' => 'stretch',
				),
			),
			'required' => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_justifyContent'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Align main axis', 'bricks' ),
			'tooltip'  => array(
				'content'  => 'justify-content',
				'position' => 'top-left',
			),
			'type'     => 'justify-content',
			'css'      => array(
				array(
					'property' => 'justify-content',
				),
			),
			'required' => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_alignItems'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Align cross axis', 'bricks' ),
			'tooltip'  => array(
				'content'  => 'align-items',
				'position' => 'top-left',
			),
			'type'     => 'align-items',
			'css'      => array(
				array(
					'property' => 'align-items',
				),
			),
			'required' => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_columnGap'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Column gap', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'column-gap',
				),
			),
			'required' => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_rowGap'] = array(
			'group'    => 'conditional',
			'label'    => esc_html__( 'Row gap', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'row-gap',
				),
			),
			'required' => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_flexGrow'] = array(
			'group'       => 'conditional',
			'label'       => esc_html__( 'Flex grow', 'bricks' ),
			'type'        => 'number',
			'min'         => 0,
			'tooltip'     => array(
				'content'  => 'flex-grow',
				'position' => 'top-left',
			),
			'css'         => array(
				array(
					'property' => 'flex-grow',
				),
			),
			'placeholder' => 0,
			'required'    => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_flexShrink'] = array(
			'group'       => 'conditional',
			'label'       => esc_html__( 'Flex shrink', 'bricks' ),
			'type'        => 'number',
			'min'         => 0,
			'tooltip'     => array(
				'content'  => 'flex-shrink',
				'position' => 'top-left',
			),
			'css'         => array(
				array(
					'property' => 'flex-shrink',
				),
			),
			'placeholder' => 1,
			'required'    => array( 'conditional_display', '=', 'flex' ),
		);

		$this->controls['conditional_flexBasis'] = array(
			'group'          => 'conditional',
			'label'          => esc_html__( 'Flex basis', 'bricks' ),
			'type'           => 'text',
			'tooltip'        => array(
				'content'  => 'flex-basis',
				'position' => 'top-left',
			),
			'css'            => array(
				array(
					'property' => 'flex-basis',
				),
			),
			'inline'         => true,
			'small'          => true,
			'placeholder'    => 'auto',
			'hasDynamicData' => false,
			'required'       => array( 'conditional_display', '=', 'flex' ),
		);

		// Misc.
		$this->controls['conditional_order'] = array(
			'group'       => 'conditional',
			'label'       => esc_html__( 'Order', 'bricks' ),
			'type'        => 'number',
			'min'         => -999,
			'css'         => array(
				array(
					'property' => 'order',
				),
			),
			'placeholder' => 0,
			'required'    => array( 'conditional_display', '!=', 'none' ),
		);
	}

	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {

		$alternative_structure = false;

		/* Allow for using button structure if preferred. */
		$alternative_structure = apply_filters( 'bricksextras_proaccordion_altdefault', $alternative_structure );

		if ( ! $alternative_structure ) {

			return array(
				'name'     => 'block',
				'label'    => esc_html__( 'Accordion Item', 'bricksextras' ),
				'settings' => array(
					'_hidden' => array(
						'_cssClasses' => 'x-accordion_item',
					),
				),
				'children' => array(
					array(
						'name'     => 'block',
						'label'    => esc_html__( 'Heading tag', 'bricksextras' ),
						'settings' => array(
							'tag'     => 'h4',
							'_hidden' => array(
								'_cssClasses' => 'x-accordion_heading-wrapper',
							),
						),
						'children' => array(
							array(
								'name'      => 'block',
								'label'     => esc_html__( 'Accordion header', 'bricksextras' ),
								'deletable' => false,
								'settings'  => array(
									'_alignItems'     => 'center',
									'_direction'      => 'row',
									'_justifyContent' => 'space-between',
									'_flexWrap'       => 'nowrap',
									'_hidden'         => array(
										'_cssClasses' => 'x-accordion_header',
									),
									'_attributes'     => array(
										array(
											'name'  => 'role',
											'value' => 'button',
										),
										array(
											'name'  => 'tabindex',
											'value' => '0',
										),
									),
								),
								'children'  => array(
									array(
										'name'     => 'text-basic',
										'settings' => array(
											'text'    => esc_html__( 'Title', 'bricks' ) . ' {item_index}',
											'tag'     => 'span',
											'_hidden' => array(
												'_cssClasses' => 'x-accordion_title',
											),
										),

									),
									array(
										'name'     => 'icon',
										'label'    => esc_html__( 'Toggle icon', 'bricksextras' ),
										'settings' => array(
											'_hidden'  => array(
												'_cssClasses' => 'x-accordion_icon',
											),
											'icon'     => array(
												'icon'    => 'ion-ios-arrow-down',
												'library' => 'ionicons',
											),
											'iconSize' => '16px',
										),
									),
								),
							),
						),
					),
					array(
						'name'      => 'block',
						'label'     => esc_html__( 'Content wrapper', 'bricksextras' ),
						'deletable' => false,
						'settings'  => array(
							'_hidden' => array(
								'_cssClasses' => 'x-accordion_content',
							),
						),
						'children'  => array(
							array(
								'name'     => 'div',
								'label'    => esc_html__( 'Content', 'bricks' ),
								'settings' => array(
									'_hidden' => array(
										'_cssClasses' => 'x-accordion_content-inner',
									),
								),
								'children' => array(
									array(
										'name'     => 'text',
										'settings' => array(
											'text' => 'Edit this text or add in new elements. Aenean commodo ligula egget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.',
										),
									),
								),
							),
						),
					),
				),
			);

		} else {

			return array(
				'name'     => 'block',
				'label'    => esc_html__( 'Accordion Item', 'bricksextras' ),
				'settings' => array(
					'_hidden' => array(
						'_cssClasses' => 'x-accordion_item',
					),
				),
				'children' => array(
					array(
						'name'      => 'block',
						'label'     => esc_html__( 'Accordion header', 'bricksextras' ),
						'deletable' => false,
						'settings'  => array(
							'_alignItems'     => 'center',
							'_direction'      => 'row',
							'_justifyContent' => 'space-between',
							'_hidden'         => array(
								'_cssClasses' => 'x-accordion_header',
							),
							'_attributes'     => array(
								array(
									'name'  => 'role',
									'value' => 'button',
								),
								array(
									'name'  => 'tabindex',
									'value' => '0',
								),
							),
						),

						'children'  => array(
							array(
								'name'     => 'heading',
								'settings' => array(
									'text'    => esc_html__( 'Title', 'bricks' ) . ' {item_index}',
									'tag'     => 'h4',
									'_hidden' => array(
										'_cssClasses' => 'x-accordion_title',
									),
								),

							),
							array(
								'name'     => 'icon',
								'label'    => esc_html__( 'Toggle icon', 'bricksextras' ),
								'settings' => array(
									'_hidden'  => array(
										'_cssClasses' => 'x-accordion_icon',
									),
									'icon'     => array(
										'icon'    => 'ion-ios-arrow-down',
										'library' => 'ionicons',
									),
									'iconSize' => '1em',
								),
							),
						),
					),
					array(
						'name'      => 'block',
						'label'     => esc_html__( 'Content wrapper', 'bricksextras' ),
						'deletable' => false,
						'settings'  => array(
							'_hidden' => array(
								'_cssClasses' => 'x-accordion_content',
							),
						),
						'children'  => array(
							array(
								'name'     => 'div',
								'label'    => esc_html__( 'Content', 'bricks' ),
								'settings' => array(
									'_hidden' => array(
										'_cssClasses' => 'x-accordion_content-inner',
									),
								),
								'children' => array(
									array(
										'name'     => 'text',
										'settings' => array(
											'text' => 'Edit this text or add in new elements. Aenean commodo ligula egget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.',
										),
									),
								),
							),
						),
					),
				),
			);
		}
	}

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

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

		$settings = $this->settings;

		$tag_option = isset( $this->settings['tag'] ) ? $this->settings['tag'] : false;

		if ( ! $tag_option ) {
			$tag = 'div';
		} else {
			$tag = \Bricks\Helpers::sanitize_html_tag( $tag_option, 'div' );
		}

		if ( 'custom' === $tag_option && isset( $this->settings['customTag'] ) ) {
			$tag = \Bricks\Helpers::sanitize_html_tag( $this->settings['customTag'], 'div' );
		}

		$config = array(
			'duration'     => isset( $settings['duration'] ) ? intval( $settings['duration'] ) : 150,
			'closeSibling' => isset( $settings['closeSibling'] ),
			'hashLink'     => isset( $settings['hashLink'] ),
			'scrollOffset' => isset( $settings['scrollOffset'] ) ? intval( $settings['scrollOffset'] ) : 0,
			'faqSchema'    => isset( $settings['faqSchema'] ),
			'conditional'  => isset( $settings['maybeConditional'] ),
			'navKeys'      => isset( $settings['navKeys'] ) ? 'enable' === $settings['navKeys'] : true,
		);

		if ( isset( $settings['expandFirstItem'] ) ) {
			$config += array( 'expandFirst' => isset( $settings['expandFirstItem'] ) );
		}

		if ( isset( $settings['expandAll'] ) ) {
			$config += array( 'expandAll' => isset( $settings['expandAll'] ) );
		}

		$identifier = \BricksExtras\Helpers::generate_unique_identifier( $this->element, $this->id );

		if ( method_exists( '\Bricks\Query', 'is_any_looping' ) ) {

			$query_id = \Bricks\Query::is_any_looping();

			if ( $query_id ) {

				if ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) {
					$loop_index      = \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) )->loop_index . '_' . \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index . '_' . \Bricks\Query::get_loop_index();
					$loop_index_hash = ( \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) )->loop_index + 1 ) . '_' . ( \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index + 1 ) . '_' . ( \Bricks\Query::get_loop_index() + 1 );
				} elseif ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) {
						$loop_index      = \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index . '_' . \Bricks\Query::get_loop_index();
						$loop_index_hash = ( \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index + 1 ) . '_' . ( \Bricks\Query::get_loop_index() + 1 );

				} else {
					$loop_index      = \Bricks\Query::get_loop_index();
					$loop_index_hash = is_numeric( \Bricks\Query::get_loop_index() ) ? \Bricks\Query::get_loop_index() + 1 : $loop_index;
				}

				$config += array( 'loopIndex' => $loop_index_hash );

				$this->set_attribute( '_root', 'data-x-id', $identifier . '_' . $loop_index );

			} else {
				$this->set_attribute( '_root', 'data-x-id', $identifier );
			}
		}

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

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

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

		$output .= '</' . $tag . '>';

		echo $output;

		if ( isset( $settings['faqSchema'] ) ) {

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

			add_filter(
				'bricks/body/attributes',
				function ( $attributes ) {

					$attributes['itemscope'] = '';
					$attributes['itemtype']  = 'https://schema.org/FAQPage';

					return $attributes;
				}
			);

		}
	}


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

		<script type="text/x-template" id="tmpl-bricks-element-xproaccordion">
			<component
			class="x-accordion"
			:data-x-expand="settings.expandFirstItem ? 'expandFirst' : ''"
			:data-x-duration="settings.duration"
			:class="settings.builderHidden ? 'x-accordion_builder-collapse' : ''"
			>

			<bricks-element-children :element="element" />

			</component>
		</script>

		<?php
	}



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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

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