<?php
/**
 * Content Switcher element.
 *
 * @package BricksExtras
 */

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

/**
 * Content Switcher element class.
 */
class X_Content_Switcher extends \Bricks\Element {

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

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

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

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

	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;


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

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

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

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

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

		$this->controls['startSep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'label'       => esc_html__( 'Content', 'bricks' ),
			'description' => esc_html__( 'The child elements placed inside this switcher can be toggled using the toggle switch element', 'bricksextras' ),
		);

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

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

		$this->controls['transitionDuration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Duration', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '.x-content-switcher_content > *',
					'property' => 'transition-duration',
				),
			),
			'placeholder' => '0ms',
		);
	}

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

		return array(
			'name'     => 'block',
			'label'    => esc_html__( 'Content block', 'bricksextras' ),
			'children' => array(
				array(
					'name'     => 'heading',
					'settings' => array(
						'text' => esc_html__( 'Content', 'bricks' ) . ' {item_index}',
						'tag'  => 'h3',
					),
				),
			),
			'settings' => array(
				'_hidden' => array(
					'_cssClasses' => 'x-content-switcher_block',
				),
			),
		);
	}


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


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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

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

		$this->set_attribute( '_root', 'class', 'x-content-switcher' );
		$this->set_attribute( 'x-content-switcher_content', 'class', 'x-content-switcher_content' );

		$this->set_attribute( 'x-content-switcher_content', 'data-x-switcher', '1' );

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

		$output = '';

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

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

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

		$output .= '</div>';

		$output .= '</div>';

		echo $output;
	}

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

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

		<component 
		class="x-content-switcher"
		>
		<div 
			class="x-content-switcher_content"
			:class="settings.builderHidden ? 'x-content-switcher_hide' : ''"
		>
		<bricks-element-children :element="element" />
	  
		</div>
		</component>
			
		</script>

		<?php
	}
}