<?php
/**
 * Toast element.
 *
 * @package BricksExtras
 */

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

/**
 * Toast element class.
 */
class X_Toast extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xtoast';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layers-alt';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xToast' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;


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

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

	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {
		return array(
			'name'     => 'xtoastnotification',
			'label'    => esc_html__( 'Notification', 'bricks' ),
			'children' => array(
				array(
					'name'     => 'text-basic',
					'label'    => esc_html__( 'Notification text', 'bricks' ),
					'settings' => array(
						'text' => esc_html__( 'Notification text here', 'bricks' ),
					),
				),
			),
		);
	}

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

	/**
	 * 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',
		);

		// Position.
		$this->controls['position'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Position', 'bricksextras' ),
			'type'    => 'select',
			'options' => array(
				'top-left'      => esc_html__( 'Top Left', 'bricksextras' ),
				'top-center'    => esc_html__( 'Top Center', 'bricksextras' ),
				'top-right'     => esc_html__( 'Top Right', 'bricksextras' ),
				'bottom-left'   => esc_html__( 'Bottom Left', 'bricksextras' ),
				'bottom-center' => esc_html__( 'Bottom Center', 'bricksextras' ),
				'bottom-right'  => esc_html__( 'Bottom Right', 'bricksextras' ),
			),
			'inline'  => true,
			'default' => 'bottom-right',
		);

		$this->controls['visibleToasts'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Max. visible toasts', 'bricksextras' ),
			'type'        => 'number',
			'units'       => false,
			'placeholder' => '3',
		);

		$this->controls['gap'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Gap between stacked toasts (px)', 'bricksextras' ),
			'type'        => 'number',
			'units'       => true,
			'small'       => true,
			'placeholder' => '14',
			'rerender'    => true,
		);

		$this->controls['offset'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Offset from viewport (px)', 'bricksextras' ),
			'type'        => 'number',
			'units'       => true,
			'small'       => true,
			'placeholder' => '24',
			'rerender'    => true,
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

		add_filter(
			'script_loader_tag',
			function ( $tag, $handle, $src ) {
				if ( 'x-toast' === $handle ) {
					$tag = '<script type="module" src="' . esc_url( $src ) . '" id="' . esc_attr( $handle ) . '-js"></script>';
				}
				return $tag;
			},
			10,
			3
		);

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

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

		$settings = $this->settings;

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

		// Set the toast settings with defaults.
		$position = isset( $settings['position'] ) ? esc_attr( $settings['position'] ) : 'bottom-right';

		// Gap is a regular number field.
		$gap    = isset( $settings['gap'] ) ? intval( $settings['gap'] ) : 14;
		$offset = isset( $settings['offset'] ) ? intval( $settings['offset'] ) : 24;

		$visible_toasts = isset( $settings['visibleToasts'] ) ? intval( $settings['visibleToasts'] ) : 3;

		// Build config for toast container.
		$config = array(
			'position'      => $position,
			'gap'           => $gap,
			'offset'        => $offset,
			'visibleToasts' => $visible_toasts,
		);

		// Set the toast configuration if inside a Bricks query loop.
		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element ) ) {
			$config['isLooping'] = \BricksExtras\Helpers::get_parent_loop_id( $this->element );
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) ) {
			$config['isLoopingComponent'] = \BricksExtras\Helpers::get_parent_loop_id( $this->element, true );
		}

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

		$output = '';

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

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

		$output .= '</div>';

		echo $output;
	}

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

		<script type="text/x-template" id="tmpl-bricks-element-xtoast">
		<component 
			v-if="!settings.builderHidden"
			is="div" 
			:class="'x-toast-position-' + (settings.position || 'bottom-right')"
			:data-x-toast-container="JSON.stringify({ 
				position: settings.position || 'bottom-right',
				gap: settings.gap || 14,
				offset: settings.offset || 24,
			})"
			>
			<bricks-element-children :element="element"/>
		</component>
		</script>

		<?php
	}
}
