import './app.loader.ts';
import { Component, ViewEncapsulation } from '@angular/core';
import { GlobalState } from './global.state';
import { preloader, BaThemeSpinner } from './theme/services';

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styles: [require('normalize.css'), require('./app.scss')],
  template: `
    <main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
      <div class="additional-bg"></div>
      <router-outlet></router-outlet>
    </main>
    `
})
export class App {

    isMenuCollapsed: boolean = false;
    param: string = "world";

  constructor(private _state: GlobalState,
      private _spinner: BaThemeSpinner) {

    this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
      this.isMenuCollapsed = isCollapsed;
      });
    }

  public ngAfterViewInit(): void {
    // hide spinner once all loaders are completed
    preloader.load().then((values) => {
      this._spinner.hide();
    });
  }

}