/** @jsx React.DOM */

(function(conjur, $, _, Backbone, React, SearchResults) {
    'use strict';

    var GroupBox = conjur.views.GroupBox,
        LayerBox = conjur.views.LayerBox,
        PolicyBox = conjur.views.PolicyBox,
        VariableBox = conjur.views.VariableBox,
        HostBox = conjur.views.HostBox,
        UserBox = conjur.views.UserBox;

    conjur.Workspace = Backbone.Router.extend({
        routes: {
            '': 'dashboard',
            'ui': 'dashboard',
            'ui/users': 'users',
            'ui/users/:user': 'user',
            'ui/groups': 'groups',
            'ui/groups/:group': 'group',
            'ui/hosts': 'hosts',
            'ui/hosts/:host': 'host',
            'ui/layers': 'layers',
            'ui/layers/:layer': 'layer',
            'ui/variables': 'variables',
            'ui/variables/:variable': 'variable',
            'ui/policies': 'policies',
            'ui/policies/:policy': 'policy',
            'ui/audit': 'audit',
            'ui/search/:search': 'search'
        },

        activateList: function(componentFunction) {
            /* console.log('List', kind); */
            this.setActiveNav(conjur.app.kind);
            conjur.app.namespace.currentNamespace = '';

            conjur.app.lists[conjur.app.kind].fetch(function(list) {
                var component = componentFunction(list);
                // doesn't make much sense due to http://stackoverflow.com/questions/24889934/componentinstance-setstate-undefined-in-0-11-0
                //components[kind] = component;

                React.renderComponent(
                    component,
                    document.getElementById('content')
                );

                // state reset won't work anymore in react v11, plus I am not sure how it is supposed to work, if namespace was just reset to zero
                // component.setState({currentNamespace: namespace.currentNamespace, members: list.members(namespace.currentNamespace)});
            });
        },

        activateRecord: function(k, id, componentFunction) {
            /* console.log('Record', k, ' :', id); */

            $('#inlineSearchContainer').show();
            conjur.app.kind = conjur.utils.pluralize(k);
            this.setActiveNav(conjur.app.kind);

            var model;
            var Record = conjur.models.Record;

            if (Record[_.capitalize(k)]) {
                model = new Record[_.capitalize(k)](id);
            } else {
                model = new Record.Generic(conjur.app.kind, id);
            }

            model.fetch(function(record) {
                var component = componentFunction(record);

                React.renderComponent(
                    component,
                    document.getElementById('content')
                );
            }, function(status, text, xhr) {
                if (status == 403) {
                    conjur.app.flash = 'You are not authorized to view ' + conjur.app.kind + ':' + id + '.';
                    window.history.back();
                } else {
                    console.error('HTTP error: ', status, text);
                }
            });
        },

        setActiveNav: function(name) {
            $('.nav-item').removeClass('active');
            $('#nav-' + name).addClass('active');
        },

        dashboard: function() {
            $('#inlineSearchContainer').hide();
            React.renderComponent(
                <Dashboard />,
                document.getElementById('content')
            );
        },

        user: function(user) {
            this.activateRecord('user', user, function(record) {
                return <User data={record}/>;
            });
        },

        users: function() {
            $('#inlineSearchContainer').show();
            conjur.app.kind = 'users';

            this.activateList(function(list) {
                return <UserBox data={{namespaces: list.namespaces, members: list.members('')}} />;
            });
        },

        group: function(group) {
            this.activateRecord('group', group, function(record) {
                return <Group data={record} />;
            });
        },

        groups: function() {
            $('#inlineSearchContainer').show();
            conjur.app.kind = 'groups';

            this.activateList(function(list) {
                return <GroupBox data={{namespaces: list.namespaces, members: list.members('')}} />;
            });
        },

        host: function(host){
            this.activateRecord('host', host, function(record) {
                return <Host data={record}/>;
            });
        },

        hosts: function() {
            $('#inlineSearchContainer').show();
            conjur.app.kind = 'hosts';
            var HostBox = conjur.views.HostBox;

            this.activateList(function(list) {
                return <HostBox data={{namespaces: list.namespaces, members: list.members('')}} />;
            });
        },

        layer: function(layer) {
            this.activateRecord('layer', layer, function(record) {
                return <Layer data={record} />;
            });
        },

        layers: function() {
            $('#inlineSearchContainer').show();
            conjur.app.kind = 'layers';

            this.activateList(function(list) {
                return <LayerBox data={{namespaces: list.namespaces, members: list.members('')}} />;
            });
        },

        variable: function(variable) {
            this.activateRecord('variable', variable, function(record) {
                return <Variable data={record} />;
            });
        },

        variables: function() {
            $('#inlineSearchContainer').show();
            conjur.app.kind = 'variables';

            this.activateList(function(list) {
                return <VariableBox data={{namespaces: list.namespaces, members: list.members('')}} />;
            });
        },

        policies: function() {
            conjur.app.kind = 'policies';

            this.activateList(function(list) {
                return <PolicyBox data={{members: list.members('')}} />;
            });
        },

        policy: function(policy) {
            this.activateRecord('policy', policy, function(record) {
                return <Policy data={record} />;
            });
        },

        audit: function(){
            $('#inlineSearchContainer').show();
            this.setActiveNav('audit');

            React.renderComponent(
                <GlobalAudit/>,
                document.getElementById('content')
            );
        },

        search: function(search){
            $('#inlineSearchContainer').show();
            SearchResults.search(search);
        }
    });

})(conjur, jQuery, _, Backbone, React, SearchResults);