import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { TfabricaUserData } from '../models/tfabrica.userdata.model';
import { TfabricaUserMenu } from '../models/tfabrica.usermenu.model';
import { TfabricaSharedService } from '../main/tfabrica.shared.service';
import { TfabricaUserMenuService } from '../main/tfabrica.usermenu.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
    selector: 't-dashboard',
    template: require('./tfabrica.dashboard.component.html')
})
export class TfabricaDashboardComponent {

    userData: TfabricaUserData;
    subscription: Subscription;
    loading: boolean;
    menuVoices: TfabricaUserMenu[];
    displayVoices: TfabricaUserMenu[];
    level: number = 0;
    prevDisplayVoices: any[];

    constructor(
        private router: Router,
        private tfabricaSharedService: TfabricaSharedService,
        private tfabricaUserMenuService: TfabricaUserMenuService
    ) {
        this.userData = tfabricaSharedService.getUser();
        this.loading = false;

        if (this.userData.isLogged) {
            this.createMenu();
        }

        console.log("TfabricaDashboardComponent constructor");

        this.subscription = tfabricaSharedService.userDataLogged$.subscribe(
            userData => {
                this.userData = userData;
                if (this.userData != null) {
                    if (this.userData.isLogged) {
                        this.createMenu();
                    }
                }
            }
        )
    }

    createMenu() {
        if (!this.userData.isLogged) return;

        this.tfabricaUserMenuService.menu()
            .subscribe(
            userMenus => {
                console.log(userMenus);
                this.menuVoices = userMenus;
                this.displayVoices = userMenus;
                this.prevDisplayVoices = [];
                console.log(this.menuVoices);
                this.loading = false;
            },
            err => {
                // Log errors if any
                console.log(err);
                this.loading = false;
            });
    }

    selectSingleVoice(voice: TfabricaUserMenu) {
        console.log(voice);
        console.log(voice["subMenu"]);
        
        // if voice have subMenu go Inside at next Level
        if (voice["subMenu"] != null && voice["subMenu"] != undefined && voice["subMenu"].length > 0) {

            this.prevDisplayVoices.push({
                level: this.level,
                displayVoices: this.displayVoices
            });

            this.displayVoices = voice["subMenu"];
            this.level = this.level + 1;
        } else {
            let path :string = voice['path'];

            if (path.charAt(0) == "/") {
                this.tfabricaSharedService.selectedVoice = voice;
                this.tfabricaSharedService.setSelectedVoice(voice);
                path = path.substring(1);
            }

            if (path.charAt(0) == "h") {
                this.loading = true;
                window.location.href = path;
                return;
            }
            
            this.router.navigate(['main', { outlets: { 'main': path } }]);
        }
    }

    backToPreviousMenu() {
        this.displayVoices = this.prevDisplayVoices[this.prevDisplayVoices.length - 1].displayVoices;
        this.prevDisplayVoices.splice(this.prevDisplayVoices.length, 1);
        this.level = this.level - 1;
    }

}