import { Component, Inject } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { ConnectionState} from "../../@inax/common";
import { DisablerOverlayComponent } from '../../@inax/commonUi/src/disablerOverlay/disablerOverlay.component';
import { InViewDirective } from '../../@inax/commonUi/src/inView/inView.directive';
import { InaxSignalR } from '../../@inax/common/src/signalR/inaxSignalR';
import { UserLoginComponent } from '../../@inax/userAuthentication';
import { Router, NavigationEnd } from '@angular/router';
import { DefaultMenuProvider } from '../../@inax/menu/src/default/defaultMenuProvider';
import { IMENUPROVIDERSERVICE_TOKEN } from '../../@inax/menu/src/interfaces/menuProvider';
import { InaxMotionService } from '../../@inax/motion/src/motion';
import { RoutingDisablerService } from '../../@inax/common/src/routing/RoutingDisablerService/RoutingDisabler.service';
import { InaxTranslateService } from '../../@inax/translate/src/translate';

@Component({
  selector: 'inax-base-app',
  styleUrls: ['app/components/app.component.css'],
  template: `
    <div class="cockpit">
      <h1>{{title}}</h1>
      <br/>
      <inax-date-time format2=""></inax-date-time>
      <nav>
        <a [routerLink]="['/home']">Home</a>
        <a [routerLink]="['/plcviewer']">Plc</a>
        <a [routerLink]="['/sqlviewer']">Sql</a>
        <a [routerLink]="['/scriptviewer']">Script</a>
        <a [routerLink]="['/alarms/historical']">Historical Alarms</a>
        <a [routerLink]="['/alarms/pending']">Pending Alarms</a>
        <a [routerLink]="['/motion/1100']">Motions</a>
        <a [routerLink]="['/configuration']">Configuration</a>
        <a [routerLink]="['/testpage']">Testpage</a>
        <a [routerLink]="['/login']">Login/out</a>
      </nav>
    <alarm-line></alarm-line>
    </div>
    <div class="container-fluid">
      <div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 col-lg-12 col-lg-offset-0 main inax-mainview">
        <router-outlet></router-outlet>
        <!--<inax-disabler-overlay [active]="disablerOverlayActive"></inax-disabler-overlay>-->
        <user-login></user-login>
        <button-menu class="navbar navbar-fixed-bottom navbar-inverse"></button-menu>
      </div>
    </div>
  `
})
export class AppComponent 
{ 
     title = 'INAX HMI';

    public connectionState: Observable<string>;
    public disablerOverlayActive: boolean;

    inView(event) {
      console.log(event);
    }

    constructor( private _signalR: InaxSignalR, 
                 private _motionService: InaxMotionService,
                 private _translator: InaxTranslateService) {

      this.disablerOverlayActive = false;
      this._motionService.HmiId = 3;
      this._translator.language = "en-GB";
      let init = this._signalR.isInitialized;
      if(this._signalR != null && this._signalR.isInitialized){
        // Let's wire up to the signalr observables
        //
        this.connectionState = this._signalR.connectionState
          .map((state: ConnectionState) => { return ConnectionState[state]; });

        this._signalR.error.subscribe(
            (error: any) => { console.warn(error); },
            (error: any) => { console.error("errors$ error", error); }
        );

        // Wire up a handler for the starting$ observable to log the
        //  success/fail result
        //
        this._signalR.starting.subscribe(
            () => { console.log("signalr service has been started"); },
            () => { console.warn("signalr service failed to start!"); }
        );
      }
    }
}