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

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

/**
 * Pro Modal element class.
 */
class X_Pro_Modal extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xpromodal';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-media-overlay';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '.x-modal_content';

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

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'modal', 'dialog', 'popup' );
	}

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

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

		$this->control_groups['trigger'] = array(
			'title' => esc_html__( 'Trigger', 'bricks' ) . ' / ' . esc_html__( 'Reshow', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['positioning'] = array(
			'title' => esc_html__( 'Size', 'bricks' ) . ' / ' . esc_html__( 'Positioning', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['close_button'] = array(
			'title'    => esc_html__( 'Close button', 'bricks' ),
			'tab'      => 'content',
			'required' => array( 'maybe_remove_close', '!=', true ),
		);

		$this->control_groups['interaction'] = array(
			'title' => esc_html__( 'Interaction', 'bricks' ) . ' / ' . esc_html__( 'Accessibility', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['animation'] = array(
			'title' => esc_html__( 'Animation', 'bricks' ),
			'tab'   => 'content',
		);
	}
	/**
	 * Set element controls.
	 */
	public function set_controls() {

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

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

		$this->controls['backdrop_color'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Backdrop', 'bricksextras' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-modal_backdrop',
				),
			),
		);

		$this->controls['disableScroll'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Disable scroll when open', 'bricksextras' ),
			'type'   => 'checkbox',
		);

		$this->controls['closeButtonSep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Close button', 'bricks' ),
		);

		$this->controls['maybe_remove_close'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Disable', 'bricks' ),
			'type'        => 'checkbox',
			'description' => esc_html__( 'Elements with the data-x-modal-close attribute can close the modal', 'bricksextras' ),
		);

		$this->controls['modal_content'] = array(
			'tab'         => 'content',
			'group'       => 'content',
			'label'       => esc_html__( 'Content', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'template' => esc_html__( 'Template', 'bricks' ),
				'wysiwyg'  => esc_html__( 'Text editor', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Text editor', 'bricks' ),
			'clearable'   => false,
			'default'     => 'wysiwyg',
		);

		if ( ! class_exists( '\Bricks\Popups' ) ) {
			$templates_list = bricks_is_builder() ? \Bricks\Templates::get_templates_list( get_the_ID() ) : array();
		} else {
			$templates_list = bricks_is_builder() ? \Bricks\Templates::get_templates_list( array( 'section', 'content' ), get_the_ID() ) : array();
		}

		$this->controls['modal_template'] = array(
			'tab'         => 'content',
			'group'       => 'content',
			'label'       => esc_html__( 'Template', 'bricks' ),
			'type'        => 'select',
			'options'     => $templates_list,
			'searchable'  => true,
			'placeholder' => esc_html__( 'Select template', 'bricks' ),
			'required'    => array( 'modal_content', '!=', array( 'nestable', 'wysiwyg' ) ),
		);

		$this->controls['modal_wysiwyg'] = array(
			'tab'           => 'content',
			'group'         => 'content',
			'label'         => esc_html__( 'Text editor', 'bricks' ),
			'type'          => 'editor',
			'inlineEditing' => array(
				'selector' => '.text-editor',
				'toolbar'  => true,
			),
			'default'       => '<h4>Modal Content</h4><p>Edit me. Aenean commodo ligula egget dolor. Aenean massa. Sum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>',
			'required'      => array( 'modal_content', '=', 'wysiwyg' ),
		);

		$this->controls['triggers'] = array(
			'tab'           => 'content',
			'group'         => 'trigger',
			'label'         => esc_html__( 'Triggers to show modal', 'bricksextras' ),
			'type'          => 'repeater',
			'titleProperty' => 'label',
			'placeholder'   => esc_html__( 'Trigger', 'bricks' ),
			'fields'        => array(
				'label'          => array(
					'type'   => 'text',
					'label'  => esc_html__( 'Name', 'bricks' ) . ' (' . esc_html__( 'Optional', 'bricks' ) . ')',
					'inline' => true,
				),
				'type'           => array(
					'label'   => esc_html__( 'Type', 'bricks' ),
					'type'    => 'select',
					'inline'  => true,
					'options' => array(
						'pageLoad'             => esc_html__( 'On page load', 'bricksextras' ) . ' (ms)',
						'pageLoadURLParameter' => esc_html__( 'On page load', 'bricksextras' ) . ' (' . esc_html__( 'URL parameter', 'bricks' ) . ')',
						'scroll'               => esc_html__( 'Scroll distance', 'bricksextras' ) . ' (px)',
						'scrolledToElement'    => esc_html__( 'Scroll to element', 'bricksextras' ),
						'exitIntent'           => esc_html__( 'Page exit intent', 'bricksextras' ),
						'pageViews'            => esc_html__( 'Number of page views', 'bricksextras' ),
						'timeInactive'         => esc_html__( 'Time inactive', 'bricksextras' ) . ' (s)',
						'elementClick'         => esc_html__( 'Click element', 'bricks' ),
						'elementHover'         => esc_html__( 'Hover element', 'bricksextras' ),
					),
				),
				'selector'       => array(
					'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Element', 'bricks' ) . ')',
					'type'           => 'text',
					'hasDynamicData' => false,
					'inline'         => true,
					'placeholder'    => '.your-class',
					'required'       => array(
						'type',
						'=',
						array(
							'scrolledToElement',
							'elementClick',
							'elementHover',
						),
					),
				),
				'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' ),
					'clearable'   => false,
					'required'    => array(
						'type',
						'=',
						array(
							'scrolledToElement',
							'elementClick',
							'elementHover',
						),
					),
				),
				'aria_controls'  => array(
					'tab'      => 'content',
					'small'    => true,
					/* translators: %s: aria-controls attribute name */
					'label'    => sprintf( esc_html__( 'Add %s to trigger', 'bricksextras' ), 'aria-controls' ),
					'type'     => 'checkbox',
					'required' => array(
						'type',
						'=',
						array(
							'elementClick',
						),
					),
				),

				'delay'          => array(
					'label'    => esc_html__( 'Delay', 'bricks' ) . ' (ms)',
					'type'     => 'number',
					'required' => array(
						'type',
						'=',
						array(
							'pageLoad',
							'pageLoadURLParameter',
							'elementClick',
							'elementHover',
							'scrolledToElement',
						),
					),
				),
				'query_includes' => array(
					'label'       => esc_html__( 'URL parameter includes', 'bricksextras' ),
					'type'        => 'text',
					'placeholder' => 'referrer=facebook',
					'required'    => array(
						'type',
						'=',
						array(
							'pageLoadURLParameter',
						),
					),
				),
				'views'          => array(
					'label'    => esc_html__( 'Views', 'bricksextras' ),
					'type'     => 'number',
					'required' => array(
						'type',
						'=',
						array(
							'pageViews',
						),
					),
				),
				'inactive_time'  => array(
					'label'    => esc_html__( 'Inactive time', 'bricksextras' ) . ' (s)',
					'type'     => 'number',
					'units'    => false,
					'required' => array(
						'type',
						'=',
						array(
							'timeInactive',
						),
					),
				),
				'amount'         => array(
					'label'    => esc_html__( 'Scroll distance', 'bricksextras' ) . ' (px)',
					'type'     => 'number',
					'unit'     => 'px',
					'required' => array(
						'type',
						'=',
						array(
							'scroll',
						),
					),
				),
			),
		);

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

		$this->controls['show_again'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Reshow', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'trigger',
			'options'     => array(
				'page_load' => esc_html__( 'Show again on next visit', 'bricksextras' ),
				'never'     => esc_html__( 'Never show again', 'bricksextras' ),
				'after'     => esc_html__( 'Only allow to show after:', 'bricksextras' ),
				'evergreen' => esc_html__( "Only show if evergreen countdown hasn't ended", 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Show again on next visit', 'bricksextras' ),
		);

		$this->controls['show_again_days'] = array(
			'tab'      => 'content',
			'group'    => 'trigger',
			'label'    => esc_html__( 'Days', 'bricksextras' ),
			'type'     => 'number',
			'inline'   => true,
			'required' => array( 'show_again', '=', array( 'after' ) ),
		);

			$this->controls['show_again_hours'] = array(
				'tab'      => 'content',
				'group'    => 'trigger',
				'label'    => esc_html__( 'Hours', 'bricksextras' ),
				'type'     => 'number',
				'inline'   => true,
				'required' => array( 'show_again', '=', array( 'after' ) ),
			);

			$this->controls['show_once'] = array(
				'tab'      => 'content',
				'group'    => 'trigger',
				'small'    => true,
				'label'    => esc_html__( 'Only show once per page visit', 'bricksextras' ),
				'type'     => 'checkbox',
				'required' => array( 'show_once_session', '!=', true ),
			);

			$this->controls['show_once_session'] = array(
				'tab'      => 'content',
				'group'    => 'trigger',
				'small'    => true,
				'label'    => esc_html__( 'Only show once per session', 'bricksextras' ),
				'type'     => 'checkbox',
				'required' => array( 'show_once', '!=', true ),
			);

			/* Positioning */

			$this->controls['modal_width'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Content width', 'bricks' ),
				'group'       => 'positioning',
				'inline'      => true,
				'type'        => 'number',
				'units'       => true,
				'css'         => array(
					array(
						'selector' => '.x-modal_container',
						'property' => 'width',
					),
				),
				'placeholder' => '600px',
			);

			$this->controls['vertical_align'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Position', 'bricks' ) . ' (' . esc_html__( 'Vertical', 'bricks' ) . ')',
				'placeholder' => esc_html__( 'Center', 'bricks' ),
				'group'       => 'positioning',
				'type'        => 'select',
				'options'     => array(
					'top'    => esc_html__( 'Top', 'bricks' ),
					'middle' => esc_html__( 'Center', 'bricks' ),
					'bottom' => esc_html__( 'Bottom', 'bricks' ),
				),
				'css'         => array(
					array(
						'property' => 'vertical-align',
						'selector' => '.x-modal_container',
					),
				),
				'inline'      => true,
			);

			$this->controls['horizontal_align'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Position', 'bricks' ) . ' (' . esc_html__( 'Horizontal', 'bricks' ) . ')',
				'placeholder' => esc_html__( 'Center', 'bricks' ),
				'group'       => 'positioning',
				'type'        => 'select',
				'css'         => array(
					array(
						'property' => 'text-align',
						'selector' => '.x-modal_backdrop',
					),
				),
				'options'     => array(
					'right'  => esc_html__( 'Right', 'bricks' ),
					'center' => esc_html__( 'Center', 'bricks' ),
					'left'   => esc_html__( 'Left', 'bricks' ),
				),
				'inline'      => true,
			);

			$this->controls['content_padding'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Content padding', 'bricks' ),
				'type'        => 'spacing',
				'group'       => 'positioning',
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => '.x-modal_content',
					),
				),
				'placeholder' => array(
					'top'    => '30px',
					'right'  => '30px',
					'bottom' => '30px',
					'left'   => '30px',
				),
			);

			$this->controls['padding'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Space from edge of viewport', 'bricksextras' ),
				'type'        => 'spacing',
				'group'       => 'positioning',
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => '.x-modal_backdrop',
					),
				),
				'placeholder' => array(
					'top'    => '20px',
					'right'  => '20px',
					'bottom' => '20px',
					'left'   => '20px',
				),
			);

			/* close button */

			$button_selector = '.x-modal_close';

			$this->controls['close_icon'] = array(
				'tab'     => 'content',
				'group'   => 'close_button',
				'label'   => esc_html__( 'Close icon', 'bricks' ),
				'type'    => 'icon',
				'css'     => array(
					array(
						'selector' => '.x-modal_close svg',
					),
				),
				'default' => array(
					'library' => 'themify',
					'icon'    => 'ti-close',
				),
			);

			$this->controls['button_text'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Button text', 'bricks' ),
				'type'        => 'text',
				'group'       => 'close_button',
				'inline'      => 'true',
				'placeholder' => '',
			);

			$this->controls['aria_label'] = array(
				'tab'         => 'content',
				'label'       => 'aria-label',
				'type'        => 'text',
				'inline'      => true,
				'group'       => 'close_button',
				'placeholder' => esc_html__( 'Close modal', 'bricksextras' ),
			);

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

			$this->controls['iconSize'] = array(
				'tab'   => 'content',
				'group' => 'close_button',
				'label' => esc_html__( 'Icon size', 'bricks' ),
				'type'  => 'number',
				'units' => true,
				'css'   => array(
					array(
						'property' => 'font-size',
						'selector' => '.x-modal_close-icon',
					),
				),
			);

			$this->controls['iconColor'] = array(
				'tab'   => 'content',
				'group' => 'close_button',
				'label' => esc_html__( 'Color', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'color',
						'selector' => $button_selector,
					),
				),
			);

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

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

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

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

			$this->controls['button_margin'] = array(
				'tab'         => 'content',
				'group'       => 'close_button',
				'label'       => esc_html__( 'Margin', 'bricks' ),
				'type'        => 'spacing',
				'css'         => array(
					array(
						'property' => 'margin',
						'selector' => $button_selector,
					),
				),
				'placeholder' => array(
					'top'    => '10px',
					'right'  => '10px',
					'bottom' => '10px',
					'left'   => '10px',
				),
			);

			/* preview animations */

			$this->controls['transitionDuration'] = array(
				'tab'            => 'content',
				'label'          => esc_html__( 'Duration', 'bricks' ),
				'type'           => 'text',
				'group'          => 'animation',
				'inline'         => true,
				'hasDynamicData' => false,
				'css'            => array(
					array(
						'selector' => '',
						'property' => '--x-modal-transition',
					),
				),
				'placeholder'    => '200ms',
			);

			$this->controls['preview_animation'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Preview', 'bricks' ),
				'group'       => 'animation',
				'type'        => 'select',
				'options'     => array(
					'x-modal_preview-start' => esc_html__( 'Start', 'bricks' ),
					'x-modal_preview-open'  => esc_html__( 'Open', 'bricks' ),
					'x-modal_preview-end'   => esc_html__( 'End', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Open', 'bricks' ),
			);

			$this->controls['start_translate_x'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Translate X', 'bricks' ),
				'type'        => 'number',
				'group'       => 'animation',
				'units'       => true,
				'inline'      => true,
				'css'         => array(
					array(
						'property' => '--x-modal-translatex',
						'selector' => '.x-modal_backdrop',
					),
				),
				'placeholder' => esc_html__( '0%', 'bricksextras' ),
				'required'    => array( 'preview_animation', '=', array( 'x-modal_preview-start' ) ),
			);

			$this->controls['start_translate_y'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Translate Y', 'bricks' ),
				'type'        => 'number',
				'group'       => 'animation',
				'units'       => true,
				'inline'      => true,
				'css'         => array(
					array(
						'property' => '--x-modal-translatey',
						'selector' => '.x-modal_backdrop',
					),
				),
				'placeholder' => esc_html__( '10%', 'bricksextras' ),
				'required'    => array( 'preview_animation', '=', array( 'x-modal_preview-start' ) ),
			);

			$this->controls['start_scale'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Scale', 'bricks' ),
				'type'        => 'number',
				'group'       => 'animation',
				'css'         => array(
					array(
						'selector' => '.x-modal_container',
						'property' => '--x-modal-scale',
					),
				),
				'inline'      => true,
				'units'       => false,
				'placeholder' => esc_html__( '1', 'bricks' ),
				'required'    => array( 'preview_animation', '=', array( 'x-modal_preview-start' ) ),
			);

			$this->controls['end_translate_x'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Translate X', 'bricks' ),
				'type'        => 'number',
				'group'       => 'animation',
				'units'       => true,
				'inline'      => true,
				'css'         => array(
					array(
						'property' => '--x-modal-close-translatex',
						'selector' => '.x-modal_backdrop',
					),
				),
				'placeholder' => esc_html__( '0%', 'bricksextras' ),
				'required'    => array( 'preview_animation', '=', array( 'x-modal_preview-end' ) ),
			);

			$this->controls['end_translate_y'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Translate Y', 'bricks' ),
				'type'        => 'number',
				'group'       => 'animation',
				'units'       => true,
				'inline'      => true,
				'css'         => array(
					array(
						'property' => '--x-modal-close-translatey',
						'selector' => '.x-modal_backdrop',
					),
				),
				'placeholder' => esc_html__( '-5%', 'bricksextras' ),
				'required'    => array( 'preview_animation', '=', array( 'x-modal_preview-end' ) ),
			);

			$this->controls['end_scale'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Scale', 'bricks' ),
				'type'        => 'number',
				'group'       => 'animation',
				'css'         => array(
					array(
						'selector' => '.x-modal_container',
						'property' => '--x-modal-close-scale',
					),
				),
				'units'       => false,
				'min'         => 0,
				'max'         => 3,
				'step'        => '0.1',
				'placeholder' => esc_html__( '1', 'bricks' ),
				'required'    => array( 'preview_animation', '=', array( 'x-modal_preview-end' ) ),
			);

			$this->controls['reduce_motion'] = array(
				'tab'         => 'content',
				'group'       => 'animation',
				'placeholder' => esc_html__( 'Animation', 'bricks' ),
				'label'       => esc_html__( "If 'Reduce motion' enabled", 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'fade'         => esc_html__( 'Fade', 'bricks' ),
					'animate'      => esc_html__( 'Animation', 'bricks' ),
					'notransition' => esc_html__( 'Disable', 'bricks' ),
				),
			);

			/* backdrop */

			$this->controls['clickBackdropClose'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => esc_html__( 'Click backdrop to close', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'auto' => esc_html__( 'Enable', 'bricks' ),
					'none' => esc_html__( 'Disable', 'bricks' ),
				),
				'css'         => array(
					array(
						'property' => 'pointer-events',
						'selector' => '.x-modal_backdrop',
					),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Enable', 'bricks' ),
			);

			$this->controls['escToClose'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => esc_html__( 'Press Esc to close', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'Enable', 'bricks' ),
					'false' => esc_html__( 'Disable', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Enable', 'bricks' ),
			);

			$this->controls['disableFocus'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => esc_html__( 'Focus the first focusable element', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'false' => esc_html__( 'Enable', 'bricks' ),
					'true'  => esc_html__( 'Disable', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Enable', 'bricks' ),
			);

			$this->controls['hashToClose'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => esc_html__( 'Hash link to close', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'Enable', 'bricks' ),
					'false' => esc_html__( 'Disable', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Enable', 'bricks' ),
			);

			$this->controls['resetForms'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => esc_html__( 'Reset forms inside modal when closed', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'True', 'bricks' ),
					'false' => esc_html__( 'False', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'True', 'bricks' ),
			);

			$this->controls['maybeCustomAriaLabel'] = array(
				'tab'         => 'content',
				'label'       => 'aria-label',
				'type'        => 'select',
				'inline'      => true,
				'group'       => 'interaction',
				'placeholder' => esc_html__( 'Auto', 'bricks' ),
				'options'     => array(
					'default' => esc_html__( 'Auto', 'bricks' ),
					'custom'  => esc_html__( 'Custom', 'bricks' ),
				),
			);

			$this->controls['customAriaLabel'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => esc_html__( 'Value', 'bricks' ),
				'inline'      => true,
				'type'        => 'text',
				'required'    => array( 'maybeCustomAriaLabel', '=', array( 'custom' ) ),
				'placeholder' => esc_html__( 'Modal', 'bricksextras' ),
			);

			$this->controls['role'] = array(
				'tab'         => 'content',
				'group'       => 'interaction',
				'label'       => 'role',
				'type'        => 'select',
				'options'     => array(
					'dialog'      => 'dialog',
					'alertdialog' => 'alertdialog',
				),
				'inline'      => true,
				'placeholder' => 'dialog',
			);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-micromodal', BRICKSEXTRAS_URL . 'components/assets/js/micromodal.min.js', array( 'bricks-scripts' ), '0.6.1', true );
		wp_enqueue_script( 'x-pro-modal', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'promodal' ) . '.js', array( 'x-micromodal' ), \BricksExtras\Plugin::VERSION, true );

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


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

		$triggers_values = isset( $this->settings['triggers'] ) ? $this->settings['triggers'] : '';

		$aria_label        = isset( $this->settings['aria_label'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['aria_label'] ) ) : esc_attr__( 'Close modal', 'bricksextras' );
		$preview_animation = isset( $this->settings['preview_animation'] ) ? esc_attr( $this->settings['preview_animation'] ) : '';
		$modal_content     = isset( $this->settings['modal_content'] ) ? $this->settings['modal_content'] : 'wysiwyg';

		$maybe_custom_aria_label = isset( $this->settings['maybeCustomAriaLabel'] ) ? 'custom' === $this->settings['maybeCustomAriaLabel'] : false;
		$custom_aria_label       = isset( $this->settings['customAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['customAriaLabel'] ) ) : esc_attr__( 'Modal', 'bricksextras' );
		$role                    = isset( $this->settings['role'] ) ? esc_attr( $this->settings['role'] ) : 'dialog';

		$triggers = array();

		if ( is_array( $triggers_values ) ) {
			foreach ( $triggers_values as $trigger_config ) {

				if ( isset( $trigger_config['type'] ) ) {

					switch ( $trigger_config['type'] ) {
						case 'pageLoad':
								$triggers[] = array(
									'type'    => 'pageLoad',
									'options' => array(
										'delay' => isset( $trigger_config['delay'] ) ? $trigger_config['delay'] : 0,
									),
								);
							break;

						case 'pageLoadURLParameter':
								$triggers[] = array(
									'type'    => 'pageLoadQuery',
									'options' => array(
										'params' => isset( $trigger_config['query_includes'] ) ? bricks_render_dynamic_data( $trigger_config['query_includes'] ) : null,
										'delay'  => isset( $trigger_config['delay'] ) ? $trigger_config['delay'] : 0,
									),
								);
							break;

						case 'scroll':
							$triggers[] = array(
								'type'    => 'pageScroll',
								'options' => array(
									'scrollAmount' => isset( $trigger_config['amount'] ) ? $trigger_config['amount'] : 0,
								),
							);
							break;

						case 'exitIntent':
							$triggers[] = array(
								'type'    => 'exitIntent',
								'options' => array(),
							);
							break;

						case 'pageViews':
							$triggers[] = array(
								'type'    => 'page_views',
								'options' => array(
									'views' => isset( $trigger_config['views'] ) ? $trigger_config['views'] : 1,
								),
							);
							break;

						case 'elementClick':
							$triggers[] = array(
								'type'    => 'element_click',
								'options' => array(
									'selector'        => isset( $trigger_config['selector'] ) ? $trigger_config['selector'] : null,
									'ariaControls'    => isset( $trigger_config['aria_controls'] ) ? $trigger_config['aria_controls'] : false,
									'delay'           => isset( $trigger_config['delay'] ) ? $trigger_config['delay'] : 0,
									'componentScope'  => isset( $trigger_config['componentScope'] ) ? 'true' === $trigger_config['componentScope'] : false,
									'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ),
								),
							);
							break;

						case 'elementHover':
							$triggers[] = array(
								'type'    => 'element_hover',
								'options' => array(
									'selector'        => isset( $trigger_config['selector'] ) ? $trigger_config['selector'] : null,
									'delay'           => isset( $trigger_config['delay'] ) ? $trigger_config['delay'] : 0,
									'componentScope'  => isset( $trigger_config['componentScope'] ) ? 'true' === $trigger_config['componentScope'] : false,
									'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ),
								),
							);
							break;

						case 'timeInactive':
							$triggers[] = array(
								'type'    => 'time_inactive',
								'options' => array(
									'time' => isset( $trigger_config['inactive_time'] ) ? $trigger_config['inactive_time'] : 0,
								),
							);
							break;
						case 'scrolledToElement':
							$triggers[] = array(
								'type'    => 'scrolled_to_element',
								'options' => array(
									'selector'        => isset( $trigger_config['selector'] ) ? $trigger_config['selector'] : null,
									'delay'           => isset( $trigger_config['delay'] ) ? $trigger_config['delay'] : 0,
									'componentScope'  => isset( $trigger_config['componentScope'] ) ? 'true' === $trigger_config['componentScope'] : false,
									'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ),
								),
							);
							break;

						default:
							// code...
							break;
					}
				}
			}
		}

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

		$modal_config = array(
			'rawConfig'         => array(
				'openClass'           => 'x-modal_open',
				'closeTrigger'        => 'data-x-modal-close',
				'awaitOpenAnimation'  => true,
				'awaitCloseAnimation' => true,
				'disableScroll'       => isset( $this->settings['disableScroll'] ),
				'disableFocus'        => 'false' !== $disable_focus,
			),
			'triggers'          => $triggers,
			'show_once'         => isset( $this->settings['show_once'] ) ? $this->settings['show_once'] : false,
			'show_once_session' => isset( $this->settings['show_once_session'] ) ? $this->settings['show_once_session'] : false,
			'show_again'        => array(
				'type'    => isset( $this->settings['show_again'] ) ? $this->settings['show_again'] : '',
				'options' => array(
					'days'  => isset( $this->settings['show_again_days'] ) ? $this->settings['show_again_days'] : 0,
					'hours' => isset( $this->settings['show_again_hours'] ) ? $this->settings['show_again_hours'] : 0,
				),
			),
			'escToClose'        => isset( $this->settings['escToClose'] ) ? $this->settings['escToClose'] : 'true',
			'hashToClose'       => isset( $this->settings['hashToClose'] ) ? $this->settings['hashToClose'] : 'true',
			'resetForms'        => isset( $this->settings['resetForms'] ) ? $this->settings['resetForms'] : 'true',
		);

		if ( isset( $this->settings['reduce_motion'] ) ) {
			$modal_config += array( 'reduceMotion' => $this->settings['reduce_motion'] );
		}

		if ( $maybe_custom_aria_label ) {
			$modal_config += array( 'customAriaLabel' => $custom_aria_label );
		}

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

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

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

		$close_icon = empty( $this->settings['close_icon'] ) ? false : self::render_icon( $this->settings['close_icon'] );

		$prevent_scroll = isset( $this->settings['disableScroll'] );

		if ( $prevent_scroll ) {
			$this->set_attribute( '_root', 'data-lenis-prevent', '' );
		}

		$this->set_attribute( '_root', 'data-x-modal', wp_json_encode( $modal_config ) );
		$this->set_attribute( '_root', 'class', 'x-modal' );
		$this->set_attribute( 'x-modal_backdrop', 'class', 'x-modal_backdrop' );
		$this->set_attribute( 'x-modal_backdrop', 'tabindex', '-1' );

		$click_backdrop_close = isset( $this->settings['clickBackdropClose'] ) ? $this->settings['clickBackdropClose'] : 'auto';

		if ( 'none' !== $click_backdrop_close ) {
			$this->set_attribute( 'x-modal_backdrop', 'data-x-modal-close', '' );
		}

		if ( BricksExtras\Helpers::maybe_preview() && isset( $this->settings['preview_animation'] ) ) {
			$this->set_attribute( 'x-modal_backdrop', 'class', $preview_animation );
		}

		$this->set_attribute( 'x-modal_container', 'class', 'x-modal_container' );
		$this->set_attribute( 'x-modal_container', 'aria-modal', 'true' );
		$this->set_attribute( 'x-modal_container', 'role', $role );

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

		$this->set_attribute( 'x-modal_close', 'class', 'x-modal_close' );
		$this->set_attribute( 'x-modal_close', 'aria-label', $aria_label );
		$this->set_attribute( 'x-modal_close', 'data-x-modal-close', '' );

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

		if ( isset( $this->settings['builderHidden'] ) ) {
			$this->set_attribute( 'x-modal_backdrop', 'data-x-hide', 'true' );
		}

		$output = '';

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

		if ( 'template' === $modal_content ) {
			$template_id = ! empty( $this->settings['modal_template'] ) ? intval( $this->settings['modal_template'] ) : false;
			$output     .= do_shortcode( '[bricks_template id="' . $template_id . '"]' );
		} elseif ( isset( $this->settings['modal_wysiwyg'] ) ) {
				$content = $this->settings['modal_wysiwyg'];
				$content = $this->render_dynamic_data( $content );
				$content = \Bricks\Helpers::parse_editor_content( $content );
				$output .= $content;
		}

					$button_text = ! empty( $this->settings['button_text'] ) ? '<span class="x-modal_close-text">' . esc_html( bricks_render_dynamic_data( $this->settings['button_text'] ) ) . '</span>' : '';

					$output .= isset( $this->settings['maybe_remove_close'] ) ? '' : "<button {$this->render_attributes( 'x-modal_close' )}>" . $button_text . "<span {$this->render_attributes( 'x-modal_close-icon' )}> " . $close_icon . '  </span></button>';

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

		echo $output;
	}
}
