import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {MediaChange, ObservableMedia} from '@angular/flex-layout';
import {CgBusyDefaults} from 'angular-busy2';
import {AppStateService} from './services/app-state.service';
import {UiStateViewModel} from './view-models/ui/ui-state.view-model';
import {Observable} from 'rxjs';
import {Title} from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'Site Status';

    @ViewChild('cgBusyTemplate')
    private cgBusyTemplate: TemplateRef<any>;

    public uiState$: Observable<UiStateViewModel>;

    constructor(private busyDefaults: CgBusyDefaults, private titleService: Title,
                media: ObservableMedia, appStateService: AppStateService) {
        media.subscribe((change: MediaChange) => {
            if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
                appStateService.setUiStateMobile();
            } else {
                appStateService.setUiStateDesktop();
            }
        });

        this.uiState$ = appStateService.onUiStateUpdated();
        this.uiState$.subscribe(this.onUiStateChange.bind(this));
    }

    onUiStateChange(state: UiStateViewModel) {
        this.titleService.setTitle(state.page.title);
    }

    ngOnInit() {
        this.busyDefaults.templateRef = this.cgBusyTemplate;
    }
}