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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  
  constructor(
    private navCtrl: NavController,
    private router: Router
  ) {
    /* Subscribe to router events */
    this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
            console.log(event.url); /* will be "/tabs/tab1" or "/tabs/tab2" depending on the open tab */	

            /* Set visual state */
            this.alanBtnComponent.nativeElement.setVisualState({
                tab: parseInt(event.url.replace('/tabs/tab', ''), 10)
            });
        }
    });
  }
  
  @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}`]);
        }
    });
  }
}