<?php 

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

class X_Toast extends \Bricks\Element {

  // Element properties
  public $category     = 'extras';
	public $name         = 'xtoast';
	public $icon         = 'ti-layers-alt';
	public $css_selector = '';
	public $scripts      = ['xToast'];
  public $nestable = true;

  
  public function get_label() {
	  return esc_html__( 'Toast', 'bricksextras' );
  }

  public function get_keywords() {
		return [ 'toast', 'notification', 'message', 'alert' ];
	}

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

	public function get_nestable_children() {
		$children = array();

		for ( $i = 0; $i < 1; $i++ ) {
			$item = $this->get_nestable_item();

			// Replace {item_index} with $index
			$item       = json_encode( $item );
			$item       = str_replace( '{item_index}', $i + 1, $item );
			$item       = json_decode( $item, true );
			$children[] = $item;
		}

		return $children;
	}

  public function set_control_groups() {

    /*$this->control_groups['spacing'] = [
      'title' => esc_html__( 'Spacing', 'bricks' ),
      'tab'   => 'content',
    ];*/

  }

  public function set_controls() {

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

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

    // Position
    $this->controls['position'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Position', 'bricksextras' ),
      'type' => 'select',
      'options' => [
        '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'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Max. visible toasts', 'bricksextras' ),
      'type' => 'number',
      'units' => false,
      'placeholder' => '3',
    ];

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

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

  }

  // Methods: Frontend-specific
  public function enqueue_scripts() {

    if ( bricks_is_builder_main() ) {
      return;
    }

    wp_enqueue_script( 'x-toast', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybeMinifyScripts('toast') . '.js', '', \BricksExtras\Plugin::VERSION, true );
    
    // Add type="module" attribute to load as ES module
    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::elementCSSAdded($this->name) ) {
      wp_enqueue_style( 'x-toast', BRICKSEXTRAS_URL . 'components/assets/css/toast.css', [], \BricksExtras\Plugin::VERSION );
    }
  }
  
  public function render() {

    $settings = $this->settings;

    // Generate a unique identifier for this tour
    $identifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

    // Get 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;
    
    $visibleToasts = isset( $settings['visibleToasts'] ) ? intval( $settings['visibleToasts'] ) : 3;

    // Build config for toast container
    $config = [
      'position' => $position,
      'gap' => $gap,
      'offset' => $offset,
      'visibleToasts' => $visibleToasts
    ];

    // Add loop information 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' );

    echo "<div {$this->render_attributes( '_root' )}>";

    // Render nested children (any Bricks elements)
    if ( method_exists('\Bricks\Frontend','render_children') ) {
      echo \Bricks\Frontend::render_children( $this );
    }

    echo "</div>";
  }

  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 }

}
