const UI = {

    create : function( props = { })
    {
        const app = this.app;
        this.container = this.app.container;
        this.layout = this.createComponent( 'layout', this.container );
        document.body.classList.add( 'md-skin' );
        this.sideNavigation = this.createComponent( 'side-navigation', this.layout.sidebarContainer );

        moment.locale( 'de' );

        // Implement logout logic here
        $( this.container ).find( '[f-id="btn-logout"]' ).first().click( function()
        {
            app.user.logout();
        });

        // Toast settings
        toastr.options = {
            "positionClass": "toast-bottom-center",
            "timeOut": 8000
        };
    },

    toastError : function( txt = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.', title = "Error" )
    {
        toastr.error( txt, title );
    },

    toastSuccess : function( txt, title = "Erfolg" )
    {
        toastr.success( txt, title );
    },

    toastWarning : function( txt, title = "Warnung" )
    {
        toastr.warning( txt, title );
    },

    getContentContainer : function()
    {
        if ( this.app.user.isLoggedIn() )
        {
            return this.layout.contentContainer;
        }
        else
        {
            return this.layout.authContainer;
        }
    },

    onUserUpdate : function()
    {
        this.layout.onUserUpdate();
        if ( this.app.user.isLoggedIn() )
        {
            this.sideNavigation.update();
            this.layout.switchToMain();
        }
        else
        {
            this.layout.switchToAuth();
        }
    },

    destroy : function()
    {

    }

};

export { UI };