<?php
/**
 * Toggle Switch element.
 *
 * @package BricksExtras
 */

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

/**
 * Toggle Switch element class.
 */
class X_Toggle_Switch extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xtoggleswitch';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-menu';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xToggleSwitch' );
	/**
	 * Loop index.
	 *
	 * @var int
	 */
	public $loop_index = 0;


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

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

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

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

		$this->control_groups['labelsLayout'] = array(
			'title'    => esc_html__( 'Layout', 'bricks' ),
			'tab'      => 'content',
			'required' => array( 'type', '=', 'multiple' ),
		);

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

		$this->control_groups['switchSlider'] = array(
			'title'    => esc_html__( 'Control', 'bricksextras' ) . ' / ' . esc_html__( 'Slider', 'bricks' ),
			'tab'      => 'content',
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->control_groups['keyboardNavigation'] = array(
			'title'    => esc_html__( 'Keyboard Navigation', 'bricksextras' ),
			'tab'      => 'content',
			'required' => array( 'type', '=', 'multiple' ),
		);
	}

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

		$this->controls['type'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Type', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'double'   => esc_html__( 'Two labels and switch', 'bricksextras' ),
				'multiple' => esc_html__( 'Multiple labels', 'bricksextras' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Two labels and switch', 'bricksextras' ),
		);

		$this->controls['hasLoop'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Query loop', 'bricks' ),
			'type'     => 'checkbox',
			'group'    => 'labels',
			'required' => array( 'type', '=', 'multiple' ),
		);

		$this->controls['query'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Query', 'bricks' ),
			'type'     => 'query',
			'group'    => 'labels',
			'popup'    => true,
			'inline'   => true,
			'required' => array(
				array( 'hasLoop', '!=', '' ),
				array( 'type', '=', 'multiple' ),
			),
		);

		$this->controls['labels'] = array(
			'tab'         => 'content',
			'placeholder' => esc_html__( 'Label', 'bricks' ),
			'type'        => 'repeater',
			'group'       => 'labels',
			'fields'      => array(
				'title' => array(
					'label'          => esc_html__( 'Label text', 'bricks' ),
					'type'           => 'text',
					'hasDynamicData' => false,
				),
			),
			'default'     => array(
				array(
					'title' => esc_html__( 'Label', 'bricks' ),
				),
				array(
					'title' => esc_html__( 'Label', 'bricks' ) . ' 2',
				),

				array(
					'title' => esc_html__( 'Label', 'bricks' ) . ' 3',
				),
			),
			'required'    => array(
				array( 'type', '=', 'multiple' ),
				array( 'hasLoop', '!=', true ),
			),
		);

		$this->controls['labelsQuery'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Label text', 'bricks' ),
			'group'    => 'labels',
			'type'     => 'text',
			'default'  => array(
				array(
					'title' => esc_html__( 'Label', 'bricks' ),
				),
			),
			'required' => array(
				array( 'type', '=', 'multiple' ),
				array( 'hasLoop', '=', true ),
			),
		);

		$this->controls['ariaLabel'] = array(
			'tab'         => 'content',
			'label'       => 'aria-label',
			'type'        => 'text',
			'group'       => 'labels',
			'inline'      => true,
			'placeholder' => esc_html__( 'Switch content', 'bricksextras' ),
			'required'    => array( 'type', '=', 'multiple' ),
		);

		$this->controls['labeldirection'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Flex direction', 'bricks' ),
			'group'    => 'labelsLayout',
			'tooltip'  => array(
				'content'  => 'flex-direction',
				'position' => 'top-left',
			),
			'type'     => 'direction',
			'css'      => array(
				array(
					'property' => 'flex-direction',
					'selector' => '.x-toggle-switch_labels',
				),
			),
			'inline'   => true,
			'rerender' => true,
		);

		$this->controls['labelflexWrap'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Flex wrap', 'bricks' ),
			'group'       => 'labelsLayout',
			'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',
					'selector' => '.x-toggle-switch_labels',
				),
			),
			'placeholder' => esc_html__( 'Wrap', 'bricks' ),
		);

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

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

		$this->controls['whichSwitcher'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Content switchers to control', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'section'   => esc_html__( 'Within the same section', 'bricksextras' ),
				'selector'  => esc_html__( 'Specific selector', 'bricksextras' ),
				'component' => esc_html__( 'Within the same component', 'bricksextras' ),
			),
			'clearable'   => false,
			'placeholder' => esc_html__( 'Within the same section', 'bricksextras' ),
		);

		$this->controls['switcherSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Content switcher', 'bricks' ) . ')',
			'type'        => 'text',
			'placeholder' => '.my-content-switcher',
			'required'    => array( 'whichSwitcher', '=', 'selector' ),
		);

		$this->controls['componentScope'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Component scope', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'False', 'bricks' ),
			'required'    => array( 'whichSwitcher', '=', 'selector' ),
		);

		$this->controls['initialState'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Initial state', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'checked'   => esc_html__( 'Checked', 'bricks' ),
				'unchecked' => esc_html__( 'Unchecked', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Unchecked', 'bricks' ),
			'required'    => array( 'type', '!=', 'multiple' ),
		);

		/* labels */

		$this->controls['labelsSep'] = array(
			'tab'      => 'content',
			'type'     => 'separator',
			'label'    => esc_html__( 'Labels', 'bricks' ),
			'required' => array(
				array( 'type', '!=', 'multiple' ),
			),
		);

		$this->controls['disableLabels'] = array(
			'label'    => esc_html__( 'Disable', 'bricks' ),
			'type'     => 'checkbox',
			'group'    => 'labels',
			'required' => array(
				array( 'type', '!=', 'multiple' ),
			),
		);

		$this->controls['leftLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Left', 'bricks' ),
			'type'        => 'text',
			'group'       => 'labels',
			'placeholder' => esc_html__( 'Monthly', 'bricks' ),
			'inline'      => true,
			'required'    => array(
				array( 'type', '!=', 'multiple' ),
				array( 'disableLabels', '!=', true ),
			),
		);

		$this->controls['rightLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Right', 'bricks' ),
			'type'        => 'text',
			'group'       => 'labels',
			'inline'      => true,
			'placeholder' => esc_html__( 'Yearly', 'bricks' ),
			'required'    => array(
				array( 'type', '!=', 'multiple' ),
				array( 'disableLabels', '!=', true ),
			),
		);

		$this->controls['screenReaderText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Screen reader', 'bricksextras' ),
			'type'        => 'text',
			'group'       => 'labels',
			'inline'      => true,
			'placeholder' => esc_html__( 'Switch pricing', 'bricksextras' ),
			'required'    => array( 'type', '!=', 'multiple' ),
		);

		/* styling*/

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

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

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

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

		/* styling */

		$labels = '.x-toggle-switch_labels .x-toggle-switch_label';

		$this->controls['labelSep'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'type'  => 'separator',
			'label' => esc_html__( 'Labels', 'bricks' ),
		);

		$this->controls['labelTypography'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $labels,
				),
				array(
					'property' => 'font',
					'selector' => ' > .x-toggle-switch_label',
				),
			),
		);

		$this->controls['labelsBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $labels,
				),
				array(
					'property' => 'background-color',
					'selector' => ' > .x-toggle-switch_label',
				),
			),
		);

		$this->controls['labelsBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'group' => 'styling',
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $labels,
				),
				array(
					'property' => 'border',
					'selector' => '.x-toggle-switch_multiple-slider',
				),
				array(
					'property' => 'font',
					'selector' => ' > .x-toggle-switch_label',
				),
			),
		);

		$this->controls['labelsBoxShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'group' => 'styling',
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => $labels,
				),
				array(
					'property' => 'box-shadow',
					'selector' => ' > .x-toggle-switch_label',
				),
			),
		);

		$this->controls['labelPadding'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'type'        => 'spacing',
			'group'       => 'styling',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => $labels,
				),
				array(
					'property' => 'padding',
					'selector' => ' > .x-toggle-switch_label',
				),
			),
			'placeholder' => array(
				'top'    => '1em',
				'right'  => '1em',
				'bottom' => '1em',
				'left'   => '1em',
			),
		);

		$this->controls['labelMargin'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'styling',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => $labels,
				),
				array(
					'property' => 'margin',
					'selector' => ' > .x-toggle-switch_label',
				),
			),
		);

		$this->controls['labelActiveSep'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'type'     => 'separator',
			'label'    => esc_html__( 'Label', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'required' => array( 'type', '=', 'multiple' ),
		);

		$this->controls['labelActiveBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-toggle-switch_multiple-slider',
				),
			),
			'required' => array( 'type', '=', 'multiple' ),
		);

		$this->controls['labelActiveTypography'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'type'     => 'typography',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.x-toggle-switch_label.x-toggle-switch_label-active',
				),
			),
			'required' => array( 'type', '=', 'multiple' ),
		);

		/* slider */

		$this->controls['sliderSep'] = array(
			'tab'      => 'content',
			'group'    => 'switchSlider',
			'type'     => 'separator',
			'label'    => esc_html__( 'Slider', 'bricks' ),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$slider = '.x-toggle-switch_slider';

		$this->controls['sliderWidth'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Width', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'group'       => 'switchSlider',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '.x-toggle-switch_switch',
					'property' => '--x-toggle-slider-width',
				),
			),
			'placeholder' => '60px',
			'required'    => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderHeight'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Height', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'group'       => 'switchSlider',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '.x-toggle-switch_slider',
					'property' => 'height',
				),
			),
			'placeholder' => '30px',
			'required'    => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'switchSlider',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $slider,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderActiveBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'switchSlider',
			'label'    => esc_html__( 'Background color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-toggle-switch_toggled ' . $slider,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'group'    => 'switchSlider',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $slider,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'group'    => 'switchSlider',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $slider,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		/* control */

		$slider_control = '.x-toggle-switch_control';

		$this->controls['controlSep'] = array(
			'tab'      => 'content',
			'group'    => 'switchSlider',
			'type'     => 'separator',
			'label'    => esc_html__( 'Control', 'bricksextras' ),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['controlSize'] = array(
			'tab'         => 'content',
			'group'       => 'switchSlider',
			'label'       => esc_html__( 'Size', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '.x-toggle-switch_switch',
					'property' => '--x-toggle-control-size',
				),
			),
			'required'    => array( 'type', '!=', 'multiple' ),
			'placeholder' => '26px',
		);

		$this->controls['controlMargin'] = array(
			'tab'         => 'content',
			'group'       => 'switchSlider',
			'label'       => esc_html__( 'Margin', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '.x-toggle-switch_switch',
					'property' => '--x-toggle-slider-padding',
				),
			),
			'required'    => array( 'type', '!=', 'multiple' ),
			'placeholder' => '4px',
		);

		$this->controls['sliderControlBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'switchSlider',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $slider_control,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderControlActiveBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'switchSlider',
			'label'    => esc_html__( 'Background color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-toggle-switch_toggled ' . $slider_control,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderControlBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'group'    => 'switchSlider',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $slider_control,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		$this->controls['sliderControlBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'group'    => 'switchSlider',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $slider_control,
				),
			),
			'required' => array( 'type', '!=', 'multiple' ),
		);

		/* keyboardNavigation */
		$this->controls['arrowKeyNavigation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Arrow Key Navigation', 'bricksextras' ),
			'group'       => 'keyboardNavigation',
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'switch'    => esc_html__( 'Switch tabs', 'bricksextras' ),
				'moveFocus' => esc_html__( 'Move focus to next tab', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Move focus to next tab', 'bricksextras' ),
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-toggle-switch', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'toggleswitch' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-toggle-switch', BRICKSEXTRAS_URL . 'components/assets/css/toggleswitch.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

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

		$settings = $this->settings;

		$type               = isset( $this->settings['type'] ) ? $this->settings['type'] : 'double';
		$left_label         = isset( $this->settings['leftLabel'] ) ? wp_kses_post( $this->settings['leftLabel'] ) : esc_attr__( 'Monthly', 'bricksextras' );
		$right_label        = isset( $this->settings['rightLabel'] ) ? wp_kses_post( $this->settings['rightLabel'] ) : esc_attr__( 'Yearly', 'bricksextras' );
		$screen_reader_text = isset( $this->settings['screenReaderText'] ) ? esc_attr( $this->settings['screenReaderText'] ) : esc_attr__( 'Switch pricing', 'bricksextras' );
		$aria_label         = isset( $this->settings['ariaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['ariaLabel'] ) ) : esc_attr__( 'Switch content', 'bricksextras' );
		$disable_labels     = isset( $this->settings['disableLabels'] );

		$which_switcher    = isset( $this->settings['whichSwitcher'] ) ? esc_attr( $this->settings['whichSwitcher'] ) : 'section';
		$switcher_selector = isset( $this->settings['switcherSelector'] ) ? bricks_render_dynamic_data( $this->settings['switcherSelector'] ) : '.my-content-switcher';

		if ( 'component' === $which_switcher ) {
			$content_switcher = 'component';
		} elseif ( 'selector' === $which_switcher ) {
			$content_switcher = $switcher_selector;
		} else {
			$content_switcher = 'section';
		}

		$arrow_key_navigation = isset( $this->settings['arrowKeyNavigation'] ) ? esc_attr( $this->settings['arrowKeyNavigation'] ) : 'moveFocus';

		$config = array(
			'type'            => $type,
			'contentSwitcher' => $content_switcher,
		);

		if ( 'switch' === $arrow_key_navigation ) {
			$config += array( 'arrowKeyNavigation' => 'switch' );
		}

		if ( isset( $this->settings['componentScope'] ) || 'component' === $which_switcher ) {
			$config += array( 'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ) );
		}

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

		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.
		$identifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

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

		$this->set_attribute( 'x-toggle-switch_labels', 'class', 'x-toggle-switch_labels' );

		$output = '';

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

		if ( 'double' === $type ) {

			if ( ! $disable_labels ) {
				$output .= '<span class="x-toggle-switch_label">' . $left_label . '</span>';
			}

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

			$output .= '<div class="x-toggle-switch_switch' . ( $checked ? ' x-toggle-switch_toggled' : '' ) . '">';

			$output .= '<span class="x-toggle-switch_slider">
                <span class="x-toggle-switch_control"></span>
              </span>

          <fieldset class="x-screen-reader screen-reader-text">
            <legend class="x-screen-reader">' . $screen_reader_text . '</legend>
            <input class="x-toggle-switch_left-input" type="radio" name="x-toggle-switch_' . esc_attr( $identifier ) . '" id="x-toggle-switch_left_' . esc_attr( $identifier ) . '"' . ( ! $checked ? ' checked' : '' ) . '>
            <label class="x-screen-reader" for="x-toggle-switch_left_' . esc_attr( $identifier ) . '">' . wp_strip_all_tags( $left_label ) . '</label>
            <input class="x-toggle-switch_right-input" type="radio" name="x-toggle-switch_' . esc_attr( $identifier ) . '" id="x-toggle-switch_right_' . esc_attr( $identifier ) . '"' . ( $checked ? ' checked' : '' ) . '>
            <label class="x-screen-reader" for="x-toggle-switch_right_' . esc_attr( $identifier ) . '">' . wp_strip_all_tags( $right_label ) . '</label>
          </fieldset>
            </div>
            ';

			if ( ! $disable_labels ) {
				$output .= '<span class="x-toggle-switch_label">' . $right_label . '</span>';
			}
		} else {

			if ( empty( $this->settings['labels'] ) ) {
				return $this->render_element_placeholder(
					array(
						'title' => esc_html__( 'Not found', 'bricks' ),
					)
				);
			}

			$this->set_attribute( 'x-toggle-switch_labels', 'role', 'tablist' );
			$this->set_attribute( 'x-toggle-switch_labels', 'aria-label', $aria_label );

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

			// Query Loop.
			if ( isset( $this->settings['hasLoop'] ) ) {

				$query = new \Bricks\Query(
					array(
						'id'       => $this->id,
						'settings' => $settings,
					)
				);

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

				if ( $labels_query ) {
					$output .= $query->render( array( $this, 'render_repeater_item' ), compact( 'labels_query' ) );
				}

				$query->destroy();
				unset( $query );

			} else {

				$this->set_attribute( 'x-toggle-switch_label-0', 'class', 'x-toggle-switch_label-active' );
				$this->set_attribute( 'x-toggle-switch_label-0', 'aria-selected', 'true' );
				$this->set_attribute( 'x-toggle-switch_label-0', 'tabindex', '0' );

				foreach ( $this->settings['labels'] as $index => $label ) {

					$label_id = esc_attr( 'x-toggle-switch_label_' . $identifier . '_' . $index );

					$this->set_attribute( "x-toggle-switch_label-$index", 'class', 'x-toggle-switch_label' );
					$this->set_attribute( "x-toggle-switch_label-$index", 'role', 'tab' );
					$this->set_attribute( "x-toggle-switch_label-$index", 'id', $label_id );

					if ( 0 !== $index ) {
						$this->set_attribute( "x-toggle-switch_label-$index", 'tabindex', '-1' );
						$this->set_attribute( "x-toggle-switch_label-$index", 'aria-selected', 'false' );
					}

					if ( ! empty( $label['title'] ) ) {

						$output .= "<button {$this->render_attributes( "x-toggle-switch_label-$index" )}><span>" . wp_kses_post( $label['title'] ) . '</span></button>';

					}
				}
			}

			$output .= '<div class="x-toggle-switch_multiple-slider"></div></div>';

		}

		$output .= '</div>';

		echo $output;
	}

	/**
	 * Render repeater item.
	 *
	 * @param string $labels_query Labels query data.
	 */
	public function render_repeater_item( $labels_query ) {

		$settings = $this->settings;
		$index    = $this->loop_index;

		$this->set_attribute( 'x-toggle-switch_label-0', 'class', 'x-toggle-switch_label-active' );
		$this->set_attribute( 'x-toggle-switch_label-0', 'aria-selected', 'true' );
		$this->set_attribute( 'x-toggle-switch_label-0', 'tabindex', '0' );

		$this->set_attribute( "x-toggle-switch_label-$index", 'class', 'x-toggle-switch_label' );
		$this->set_attribute( "x-toggle-switch_label-$index", 'role', 'tab' );
		$this->set_attribute( "x-toggle-switch_label-$index", 'id', 'x-toggle-switch_label_' . $this->id . '_' . $index );

		if ( 0 !== $index ) {
			$this->set_attribute( "x-toggle-switch_label-$index", 'tabindex', '-1' );
			$this->set_attribute( "x-toggle-switch_label-$index", 'aria-selected', 'false' );
		}

		// Render.
		$html = '';

		if ( ! empty( $labels_query ) ) {
			$html = "<button {$this->render_attributes( "x-toggle-switch_label-$index" )}><span>" . wp_kses_post( $labels_query ) . ' </span></button>';
		}

		++$this->loop_index;

		return $html;
	}
}
