import { Component, ElementRef, NgZone, Renderer2, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material';

import { Subscription } from 'rxjs/Subscription';

import '../../../public/css/styles.scss';

import { HeaderService, IMenuItem, LoaderService, TokenService } from '../core/shared';

import {
    Event,
    NavigationEnd, NavigationError, NavigationStart, Router
} from '@angular/router';

import 'rxjs/add/operator/filter';

import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'knk-app',
    // styleUrls: ['./app.component.scss'],
    templateUrl: './app.component.html'
})
export class AppComponent {
    sideMenu: IMenuItem[];
    @ViewChild('mobilesidenav') sidenav: MdSidenav;
    navigationSubscription: Subscription;
    private _nativeElem: HTMLElement;

    constructor(router: Router, translateService: TranslateService, private headerService: HeaderService,
        private loaderService: LoaderService, private tokenService: TokenService,
        private ngZone: NgZone, private renderer: Renderer2, el: ElementRef) {
        this._nativeElem = el.nativeElement;
        translateService.setDefaultLang('en');

        router.events
            .filter((e: Event) => e instanceof NavigationError)
            .subscribe((e: NavigationError) => {
                this.unsubscribeNavigation();
                if (e.error === 'miss lang') {
                    router.navigate([translateService.getDefaultLang(), '404'], { skipLocationChange: true });
                }
                if (e.error === 'notfound') {
                    router.navigate([translateService.currentLang, '404'], { skipLocationChange: true });
                }
            });

        router.events
            .filter((e: Event) => e instanceof NavigationStart)
            .subscribe(() => {
                this.ngZone.runOutsideAngular(() => {
                    this.navigationSubscription = this.loaderService.subscribeLoader(this);
                });
            });
        router.events
            .filter((e: Event) => e instanceof NavigationEnd)
            .subscribe(() => {
                this.ngZone.runOutsideAngular(() => {
                    this.unsubscribeNavigation();
                });
            });
        this.sideMenu = this.headerService.getMenu();

        this.loaderService.loaderComplete.subscribe((isLoaded: boolean) => {
            this.toggleLoaded(isLoaded);
        });
    }
    showSideNav(): void {
        this.sidenav.open();
    }
    get isLogin(): boolean {
        return this.tokenService.isLogin;
    }
    public logout(): void {
        this.tokenService.releaseToken();
    }

    private unsubscribeNavigation(): void {
        if (this.navigationSubscription) {
            this.navigationSubscription.unsubscribe();
        }
    }
    private toggleLoaded(loaded: boolean): void {
        let loadingClass: string = 'loading';
        this.ngZone.runOutsideAngular(() => {
            if (loaded) {
                this.renderer.removeClass(this._nativeElem, loadingClass);
            } else {
                this.renderer.addClass(this._nativeElem, loadingClass);
            }
        });
    }
}
