const Layout = {
    templateUrl : 'js/app/components/general/layout.html',
    create : function( p )
    {
        const $container = $( this.container );

        this.render();

        this.authContainer = $container.find( '[f-id="auth-container"]' ).first().get( 0 );
        this.mainContainer = $container.find( '[f-id="main-container"]' ).first().get( 0 );
        this.contentContainer = $container.find( '[f-id="content-container"]' ).first().get( 0 );
        this.sidebarContainer = $container.find( '[f-id="sidebar-container"]' ).first().get( 0 );

        const app = this.app;
        const $select = $container.find( '[f-id="layout-group-dropdown"]' ).first().on(
            'change',
            function()
            {
                app.user.setActiveGroupId( $(this).find(":selected").val() );
                app.UI.sideNavigation.update();
                app.redirect( 'dashboard/' + $(this).find(":selected").val() );
                //app.reload( true );
            }
        );
    },

    getActiveGroupId : function()
    {
        return $( this.container ).find( '[f-id="layout-group-dropdown"]' ).find( ':selected' ).val();
    },

    onUserUpdate : function()
    {
        const $container = $( this.container );
        const $select = $container.find( '[f-id="layout-group-dropdown"]' ).first();
        $select.find( 'option' ).remove();
        const groups = this.app.user.groups;
        const gId = this.app.user.getActiveGroup() ? this.app.user.getActiveGroup().id : null;
        for ( let gi = 0; gi < groups.length; gi++ )
        {
            if ( this.app.user.canAdministrateGroup( groups[ gi ].id ) )
            {
                if ( gId == groups[ gi ].id )
                {
                    $select.append( '<option selected="selected" value="' + groups[ gi ].id  + '">' + groups[ gi ].display_name + '</option>');
                }
                else
                {
                    $select.append( '<option value="' + groups[ gi ].id  + '">' + groups[ gi ].display_name + '</option>');
                }
            }
        }
    },

    switchToMain : function()
    {
        const $container = $( this.container );
        document.body.classList.remove( 'gray-bg' );
        $container.find( '[f-id="auth-container"]' ).first().hide()
        $container.find( '[f-id="main-container"]' ).first().show();
    },

    switchToAuth : function()
    {
        const $container = $( this.container );
        document.body.classList.add( 'gray-bg' );
        $container.find( '[f-id="main-container"]' ).first().hide();
        $container.find( '[f-id="auth-container"]' ).first().show()
    },

    destroy : function()
    {

    }
};

export { Layout };