/**
 * Application main view. Acts as a container and manager for regular views
 * 
 * @category MyEic
 * @subcategory Views
 * 
 * @extends WindozDialogContent
 */
class EICAppTemplate extends WindozDomContent {
        
    DOMContentLoaded() { 
        ui.init({ariaEnabled: true}); 
        ui.eicfy(this.el); 
                
        window.addEventListener('resize', this.onGlobalResize.bind(this), true);

        this.menu = new Menu(this.find('menu.app-menu'));

        // todo : replace with something more dynamic
        this.loadAppMenu('global/app-menu-map.json');

        new app.LoadedClasses.HelperBot('.helperBotCanvas')
    }

    onGlobalResize() { WindozController.resize(); }

    loadAppMenu(source) {
        app.Assets.loadJson({ name: source})
        .then(this.setupAppMenu.bind(this));
    }

    setupAppMenu(data) { 
        let menu = [];

        for(let section of data) {

            let apps = section.items.filter(item => {
                if(item.access.includes("*")) return(true)
                let intersect = app.User.roles.filter(r => (item.access.includes(r)) || (item.access.includes("*")) )
                return(intersect.length > 0)
            });

            if(apps.length > 0) {
                let entry = Object.assign({}, section);
                entry.items = apps;
                menu.push(entry)
            }
        }
        this.menu.clear();
        this.menu.parse(menu); 
        
        const button = new Button(this.find('button.app-menu'));
        button.click = this.toggleAppMenu.bind(this);

        this.menu.collapsed = app.User.getPreference('global.menu.collapsed');
    }

    /**
     * Enables/disables collapsable app menu
     * @param {*} event 
     */
    toggleAppMenu() { 
        this.menu.collapsed = ! this.menu.collapsed ; 
        app.User.setPreference('global.menu.collapsed', this.menu.collapsed);
    }
    
    initSession() {
        this.session = ui.create(`<div class="eic-session connected">
            <div eicdropdown>
                <button eicuser><span></span></button>
                <menu eicmenu></menu>
            </div>
        </div>`);
        
        this.userMenu = new DropDown(this.session.querySelector('[eicdropdown]'));
        
        this.userMenu.menu.parse([
            {
                label: "My profile",
                icon: "icon-user",
                severity: 'success',
                onclick: this.onProfile.bind(this)
            },
            {
                label: "Log out",
                icon: "icon-logoff",
                severity: 'danger',
                onclick: this.onLogout.bind(this)
            }
        ]);
        
        this.find('header').appendChild(this.session);

        this.userIcon = new UserIcon(this.session.querySelector('[eicuser]'));
        this.userIcon.showStatus = true;
        this.userIcon.uuid = app.User.identity.uuid;
        this.userIcon.fullname = app.User.identity.username
        this.userIcon.online = app.MessageBus.connected;

        app.events.channel.addEventListener('MessageBus.Connected', this.onBusConnected.bind(this))
        app.events.channel.addEventListener('MessageBus.Closed', this.onBusClosed.bind(this))
        
        return this.session;
    }

    async onLogout(event) {
        event.stopPropagation(); event.preventDefault();
        this.userMenu.collapse();
        app.User.logout(); 
    }

    onProfile(event) {
        event.stopPropagation();
        event.preventDefault();
        this.userMenu.collapse();
        app.Router.route('/common/myprofile');
    }

    onBusConnected() { this.userIcon.online = true; }

    onBusClosed() { this.userIcon.online = false; }

}

app.registerClass('EICAppTemplate', EICAppTemplate);