import { Router } from '@angular/router';
import { UserService } from './auth/user.service';
import { AppConfig } from './app-config.interface';
import { APP_CONFIG } from './app-config';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <md-toolbar color="primary">
        <h1><a routerLink="/">{{title}}</a></h1>

        <a *ngIf='user.loggedIn()' md-button routerLink="/experiments">Experiments</a>

        <div class="auth">
          <a *ngIf='user.loggedIn()' md-button (click)="logout()">Logout</a>
          <a *ngIf='!user.loggedIn()' md-button routerLink="/auth/login">Login</a>
        </div>
      </md-toolbar>
    </nav>
    <div class="content">
      <router-outlet></router-outlet>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Byteflies';

  constructor(@Inject(APP_CONFIG) config: AppConfig, public user: UserService, private router: Router) {
    this.title = config.title;
    window['user'] = this.user;
  }

  logout() {
    this.user.logout();
    this.router.navigate(['auth', 'login']);
  }
}