import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {MediaChange, ObservableMedia} from '@angular/flex-layout';
import {CgBusyDefaults} from 'angular-busy2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'Site Status';
    uiStatus = {
      sideMenu: {
        opened: false,
        mode: 'over'
      },
      toolbar: {
          displayMenuButton: true
      }
    };
    mediaWatcher = null;

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

    constructor(media: ObservableMedia, private busyDefaults: CgBusyDefaults) {
        this.mediaWatcher = media.subscribe((change: MediaChange) => {
            if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
                this.uiStatus.sideMenu.opened = false;
                this.uiStatus.sideMenu.mode = 'over';
                this.uiStatus.toolbar.displayMenuButton = true;
            } else {
                this.uiStatus.sideMenu.opened = true;
                this.uiStatus.sideMenu.mode = 'side';
                this.uiStatus.toolbar.displayMenuButton = false;
            }
        });
    }

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