const SideNavigation = {
    templateUrl : 'js/app/components/general/side-navigation.html',
    create : function( p )
    {
        this.render( { user : this.app.user } );
        const $container = $( this.container );

        $( 'body' ).find( '[f-id="btn-minimize-menu"]' ).first().click( function()
        {
            $( 'body' ).toggleClass( 'mini-navbar');
            if ( !$( 'body' ).hasClass('mini-navbar') || $( 'body' ).hasClass( 'body-small' ) )
            {
                // Hide menu in order to smoothly turn on when maximize menu
                $('#side-menu').hide();

                // For smoothly turn on menu
                setTimeout(
                    function () {
                        $('#side-menu').fadeIn(400);
                    }, 200);
            }
            else if ( $('body').hasClass('fixed-sidebar') )
            {
                $('#side-menu').hide();
                setTimeout(
                    function () {
                        $('#side-menu').fadeIn(400);
                    }, 100);
            }
            else
            {
                // Remove all inline style from jquery fadeIn function to reset menu state
                $('#side-menu').removeAttr('style');
            }
        });

        // Minimalize menu when screen is less than 768px
        $( window ).bind(" resize", function ()
        {
            if ( $(this).width() < 769 )
            {
                $( 'body' ).addClass( 'body-small' )
            }
            else
            {
                $( 'body' ).removeClass( 'body-small' )
            }
        });

        this.app.controller.addEventListener( this.app.controller.EVENT.CONTROLLER_VIEW_CHANGED, function( event )
        {
            const viewId = this.app.controller.getCurrentView().getId();
            let viewIdSplit = ( viewId ) ? viewId.split( "-" ) : [ "" ];

            viewIdSplit = viewIdSplit[ 0 ];

            $container.find( 'li.active' ).removeClass( 'active' );
            let $aItem = $container.find( '[f-menu-id="' + viewId + '"]' ).first();
            $aItem.addClass( 'active' );
            $aItem.parents( '[f-menu-type="folder"]' ).first().addClass( 'active' );

        }.bind( this ));

        $container.on( 'click', '[f-menu-type="folder"]', function()
        {
           $( this ).toggleClass( 'active' );
           $( this ).find( '.nav-second-level' ).first().toggleClass( 'in' );
        });
        $container.on( 'click', '.nav-second-level', function( e )
        {
            e.stopPropagation();
        });
    },

    update : function()
    {
        this.render( { user : this.app.user } );
    },

    destroy : function()
    {

    }
};

export { SideNavigation };