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

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

    userData: TfabricaUserData;
    @ViewChild('tleftmenu') tleftmenu;
    loading: boolean;
    menuVoices: TfabricaUserMenu[];
    displayVoices: any[];


    subscription: Subscription;
    subscriptionShared: Subscription;

    constructor(
        private tfabricaSharedService: TfabricaSharedService,
        private tfabricaUserMenuService: TfabricaUserMenuService,
        private router: Router
    ) {

        this.userData = tfabricaSharedService.getUser();
        this.loading = false;

        this.menuVoices = [];

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

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

        this.subscription = tfabricaSharedService.mainLeftSidenavToggled$.subscribe(
            toogle => {
                this.toggleSidenavMenu();
            }
        )
    }

    toggleSidenavMenu() {
    }

    backToHome() {
        this.tfabricaSharedService.toggleMainLeftSidenav(true);
        this.router.navigate(['/main', { outlets: { 'main': ['home'] } }]);
    }

    goToVoice(voiceName) {
        console.log(voiceName);
        this.tfabricaSharedService.toggleMainLeftSidenav(true);
        this.router.navigate(['/main', { outlets: { 'main': [voiceName] } }]);
    }

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

        this.menuVoices = Array<TfabricaUserMenu>();
        this.tfabricaUserMenuService.menu()
            .subscribe(
            userMenus => {
                console.log(userMenus);
                this.menuVoices = userMenus;
                this.loading = false;

                this.designMenu();
            },
            err => {
                // Log errors if any
                console.log(err);
                this.loading = false;
            });
    }

    designMenu() {

        let actThis = this;

        this.displayVoices = Array<TfabricaUserMenu>();

        actThis.attachSubMenu(this.menuVoices);

        console.log(this.displayVoices);
    }

    attachSubMenu(subMenu: Array<TfabricaUserMenu>) {
        let actThis = this;

        subMenu.forEach(function (entry) {
            actThis.displayVoices.push(entry);

            if (entry.isOpen) {
                actThis.attachSubMenu(entry.subMenu);
            }

        });
    }

    selectSingleVoice(singleVoice: TfabricaUserMenu) {
        console.log(singleVoice);
        singleVoice.isOpen = !singleVoice.isOpen;

        if (singleVoice.subMenu.length == 0) {
            this.tfabricaSharedService.toggleMainLeftSidenav(true);

            var path: string = singleVoice.path;

            if (path.startsWith("/")) {
                this.tfabricaSharedService.selectedVoice = singleVoice;
                this.tfabricaSharedService.setSelectedVoice(singleVoice);
                path = path.substring(1);
            }

            if (path.startsWith("http")) {
                this.loading = true;
                window.location.href = path;
                return;
            }
            

            this.router.navigate(['main', { outlets: { 'main': path } }]);
        }

        this.designMenu();
    }

}