<?php
/**
 * Notification Bar element.
 *
 * @package BricksExtras
 */

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

/**
 * Notification Bar element class.
 */
class X_Notification_Bar extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xnotificationbar';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-close';
	/**
	 * 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__( 'Header notification bar', 'bricksextras' );
	}

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

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

		$this->control_groups['content'] = array(
			'title' => esc_html__( 'Content', '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',
		);

		$this->control_groups['stickyGroup'] = array(
			'title' => esc_html__( 'Sticky on scroll', 'bricks' ),
			'tab'   => 'content',
		);
	}

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

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

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

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

		$this->controls['slideDuration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Duration', 'bricks' ) . ' (' . esc_html__( 'Slide up', 'bricksextras' ) . ')',
			'type'        => 'number',
			'inline'      => true,
			'small'       => true,
			'units'       => false,
			'placeholder' => '300',
		);

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

		$this->controls['notification_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['notification_wysiwyg'] = array(
			'tab'      => 'content',
			'group'    => 'content',
			'label'    => esc_html__( 'Text editor', 'bricks' ),
			'type'     => 'editor',

			'default'  => wp_kses_post( 'Edit me. I am a notification.' ),
			'required' => array( 'notification_content', '!=', array( 'nestable', 'template' ) ),
		);

		$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 again after:', 'bricksextras' ),
				'evergreen' => esc_html__( "Only show if evergreen countdown hasn't ended", 'bricksextras' ),
				'manual'    => esc_html__( 'Manual (if using with code)', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Show on every visit', 'bricksextras' ),
		);

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

		$this->controls['dismissInfo'] = array(
			'tab'         => 'content',
			'description' => esc_html__( 'After dismissal, show again after:', 'bricksextras' ),
			'type'        => 'info',
			'required'    => array( 'show_again', '=', 'dismiss' ),
		);

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

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

		/* dismiss button */

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

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

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

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

		$icon_selector = '.x-notification_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'    => '5px',
				'right'  => '5px',
				'bottom' => '5px',
				'left'   => '5px',
			),
		);

		/* Sticky header */

		$this->controls['stickyDisplay'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Visibility in sticky header', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'hide'   => esc_html__( 'Hide', 'bricks' ),
				'show'   => esc_html__( 'Show', 'bricks' ),
				'always' => esc_html__( 'Always show', 'bricks' ),
			),
			'group'       => 'stickyGroup',
			'inline'      => true,
			'placeholder' => esc_html__( 'Always show', 'bricks' ),
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

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

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

		$notification_content = isset( $this->settings['notification_content'] ) ? $this->settings['notification_content'] : 'wysiwyg';
		$dismiss_icon         = empty( $this->settings['dismiss_icon'] ) ? false : self::render_icon( $this->settings['dismiss_icon'] );

		$slide_duration = isset( $this->settings['slideDuration'] ) ? intval( $this->settings['slideDuration'] ) : 300;
		$aria_label     = isset( $this->settings['dismissAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['dismissAriaLabel'] ) ) : esc_attr__( 'Dismiss', 'Bricks' );

		$sticky_display = isset( $this->settings['stickyDisplay'] ) ? esc_attr( $this->settings['stickyDisplay'] ) : 'always';

		$notification_config = array(
			'slideDuration' => $slide_duration,
			'show_again'    => array(
				'type'    => isset( $this->settings['show_again'] ) ? $this->settings['show_again'] : 'page_load',
				'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,
				),
			),
		);

		$loop_index = false;

		$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();
				} 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();
				} else {
					$loop_index = \Bricks\Query::get_loop_index();
				}

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

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

		$this->set_attribute( '_root', 'data-x-notification', wp_json_encode( $notification_config ) );

		$this->set_attribute( '_root', 'data-x-sticky', $sticky_display );
		$this->set_attribute( 'x-notification_close', 'class', 'x-notification_close' );
		if ( ' ' !== $aria_label ) {
			$this->set_attribute( 'x-notification_close', 'aria-label', $aria_label );
		}
		$this->set_attribute( 'x-notification_close-text', 'class', 'x-notification_close-text' );
		$this->set_attribute( 'x-notification_close-icon', 'class', 'x-notification_close-icon' );

		$output = '';

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

		if ( 'wysiwyg' === $notification_content ) {
			if ( isset( $this->settings['notification_wysiwyg'] ) ) {
				$content = $this->settings['notification_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-notification_close' )}>";
		if ( isset( $this->settings['dismissText'] ) && $this->settings['dismissText'] ) {
			$output .= "<span {$this->render_attributes( 'x-notification_close-text' )}> " . esc_html( bricks_render_dynamic_data( $this->settings['dismissText'] ) ) . '  </span>';
		}
		$output .= "<span {$this->render_attributes( 'x-notification_close-icon' )}> " . $dismiss_icon . '  </span>';

		$output .= '</button>';

		$output .= '</div>';

		echo $output;
	}

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

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

		<component>
			<contenteditable
				tag="div"
				v-if="'nestable' !== settings.notification_content"
				class="x-notification_content"
				:name="name"
				controlKey="notification_wysiwyg"
				toolbar="true"
				:settings="settings"
				/>

				<bricks-element-children
				v-else
				:element="element"
				/>
				<button 
				class="x-notification_close"
				>

				<contenteditable
				tag="span"
				class="x-notification_close-text"
				v-if="settings.dismissText"
				:name="name"
				controlKey="dismissText"
				toolbar="style"
				:settings="settings"
				/>
				<span class="x-notification_close-icon"><icon-svg :iconSettings="settings.dismiss_icon"/></span>
				</button>
		</component>
			
		</script>

		<?php
	}
}