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

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

/**
 * Pro Alert element class.
 */
class X_Pro_Alert extends \Bricks\Element {

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

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

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

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

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

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

		$this->control_groups['icon'] = array(
			'title' => esc_html__( 'Icon', 'bricks' ) . ' / ' . esc_html__( 'Dismiss', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['layout'] = array(
			'title' => esc_html__( 'Layout', 'bricks' ) . ' / ' . esc_html__( 'Spacing', '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['width'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Width', 'bricks' ),
			'inline' => true,
			'type'   => 'number',
			'units'  => true,
			'css'    => array(
				array(
					'selector' => '',
					'property' => 'width',
				),
			),
		);

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

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

		$this->controls['alert_position'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Positioning', 'bricks' ),
			'type'        => 'select',
			'group'       => 'position',
			'options'     => array(
				'relative' => 'static',
				'fixed'    => 'fixed',
			),
			'css'         => array(
				array(
					'property' => 'position',
					'selector' => '',
				),
			),
			'inline'      => true,
			'placeholder' => 'static',
			'clearable'   => false,
		);

		$this->controls['alertTop'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Top', 'bricks' ),
			'type'     => 'number',
			'group'    => 'position',
			'units'    => true,
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'top',
					'selector' => '&[data-viewport]',
				),
			),
			'required' => array( 'alert_position', '=', array( 'fixed' ) ),
		);

		$this->controls['alertRight'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Right', 'bricks' ),
			'type'     => 'number',
			'group'    => 'position',
			'units'    => true,
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'right',
					'selector' => '&[data-viewport]',
				),
			),
			'default'  => 30,
			'required' => array( 'alert_position', '=', array( 'fixed' ) ),
		);

		$this->controls['alertBottom'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Bottom', 'bricks' ),
			'type'     => 'number',
			'group'    => 'position',
			'units'    => true,
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'bottom',
					'selector' => '&[data-viewport]',
				),
			),
			'default'  => 30,
			'required' => array( 'alert_position', '=', array( 'fixed' ) ),
		);

		$this->controls['alertLeft'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Left', 'bricks' ),
			'type'     => 'number',
			'group'    => 'position',
			'units'    => true,
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'left',
					'selector' => '&[data-viewport]',
				),
			),
			'required' => array( 'alert_position', '=', array( 'fixed' ) ),
		);

		$this->controls['alertZindex'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Z-index', 'bricks' ),
			'type'     => 'number',
			'group'    => 'position',
			'units'    => false,
			'inline'   => true,
			'css'      => array(
				array(
					'property' => 'z-index',
					'selector' => '',
				),
			),
			'required' => array( 'alert_position', '=', array( 'fixed' ) ),
		);

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

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

		$this->controls['alert_wysiwyg'] = array(
			'tab'           => 'content',
			'group'         => 'content',
			'label'         => esc_html__( 'Text editor', 'bricks' ),
			'type'          => 'editor',
			'inlineEditing' => array(
				'selector' => '.text-editor',
				'toolbar'  => true,
			),
			'default'       => 'Edit me. I am an alert.</p>',
			'required'      => array( 'alert_content', '!=', array( 'nestable' ) ),
		);

		$this->controls['show_again'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Reshow', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'page_load' => esc_html__( 'Show on every visit', 'bricksextras' ),
				'dismiss'   => esc_html__( 'Show again until user clicks dismiss', 'bricksextras' ),
				'never'     => esc_html__( 'Never show again', 'bricksextras' ),
				'after'     => esc_html__( 'Only allow to show after:', 'bricksextras' ),
				'manual'    => esc_html__( 'Manual (if using with code)', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Show again on next visit', 'bricksextras' ),
		);

		$this->controls['typeInfo'] = array(
			'tab'         => 'content',
			'description' => esc_html__( 'See the docs for details on show/close alerts in your code', 'bricksextras' ),
			'type'        => 'info',
			'required'    => array( 'show_again', '=', 'manual' ),
		);

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

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

		/* dismiss icon */

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

		$this->controls['aria_label'] = array(
			'tab'         => 'content',
			'label'       => 'aria-label',
			'inline'      => true,
			'type'        => 'text',
			'group'       => 'icon',
			'placeholder' => esc_attr__( 'Dismiss', 'bricks' ),
		);

		$icon_selector = '.x-alert_close';

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

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

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

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

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

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

		/* layout */

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

			),
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

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

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

		$alert_content  = isset( $this->settings['alert_content'] ) ? $this->settings['alert_content'] : 'wysiwyg';
		$alert_position = isset( $this->settings['alert_position'] ) ? $this->settings['alert_position'] : 'relative';
		$dismiss_icon   = empty( $this->settings['dismiss_icon'] ) ? false : self::render_icon( $this->settings['dismiss_icon'] );
		$aria_label     = isset( $this->settings['aria_label'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['aria_label'] ) ) : esc_attr__( 'Dismiss', 'bricks' );

		$alert_config = array();

		$alert_config['show_again'] = array(
			'type'    => isset( $this->settings['show_again'] ) ? $this->settings['show_again'] : '',
			'options' => array(
				'days'  => isset( $this->settings['show_again_days'] ) ? intval( $this->settings['show_again_days'] ) : 0,
				'hours' => isset( $this->settings['show_again_hours'] ) ? intval( $this->settings['show_again_hours'] ) : 0,
			),
		);

		$this->set_attribute( '_root', 'data-x-alert', wp_json_encode( $alert_config ) );

		if ( 'fixed' === $alert_position ) {
			$this->set_attribute( '_root', 'data-viewport', '' );
		}

		$this->set_attribute( 'x-alert_close', 'class', 'x-alert_close' );
		$this->set_attribute( 'x-alert_close', 'aria-label', $aria_label );
		$this->set_attribute( 'x-alert_close-icon', 'class', 'x-alert_close-icon' );

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

		$output = '';

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

		if ( 'wysiwyg' === $alert_content ) {
			if ( isset( $this->settings['alert_wysiwyg'] ) ) {
				$content = $this->settings['alert_wysiwyg'];
				$content = $this->render_dynamic_data( $content );
				$content = \Bricks\Helpers::parse_editor_content( $content );
				$output .= $content;
			}
		} elseif ( method_exists( '\Bricks\Frontend', 'render_children' ) ) {
					$output .= \Bricks\Frontend::render_children( $this );
		}

		$output .= "<button {$this->render_attributes( 'x-alert_close' )}><span {$this->render_attributes( 'x-alert_close-icon' )}> " . $dismiss_icon . '  </span></button>';

		$output .= '</div>';

		echo $output;
	}

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

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

	<component 
				v-show="!settings.builderHidden"
		:data-viewport="'fixed' === settings.alert_position ? true : null"
		data-x-alert
			>

		<contenteditable
			tag="div"
			v-if="'nestable' !== settings.alert_content"
			class="x-alert_content"
			:name="name"
			controlKey="alert_wysiwyg"
			toolbar="true"
			:settings="settings"
			/>
			<div 
			v-else
			class="x-alert_content"
			>
			<bricks-element-children
						:element="element"
					/>
			</div>
		
			<button 
			class="x-alert_close"
			>
			<span class="x-alert_close-icon"><icon-svg :iconSettings="settings.dismiss_icon"/></span>
			</button>
				</component>
			
		</script>

		<?php
	}
}