import { Component, ElementRef, ViewChild } from '@angular/core';
import '@alan-ai/alan-button';
import { Platform, NavController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  
  constructor(
      private navCtrl: NavController
  ) {}
  
  @ViewChild('alanBtnEl', {static:false}) alanBtnComponent: ElementRef<HTMLAlanButtonElement>;
  
  ngAfterViewInit() {
    this.alanBtnComponent.nativeElement.addEventListener('command', (data) => {
        const commandData = (<CustomEvent>data).detail;

        if (commandData.command === 'navigation') {
            /* Call client code that will react to the received command */
            this.navCtrl.navigateForward([`/tabs/tab${commandData.tabNumber}`]);
        }
    });
  }
}