/** @jsx React.DOM */
/* global conjur, jQuery, _, Backbone, React */


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

    var Dashboard = conjur.views.Dashboard,
        GroupBox = conjur.views.GroupBox,
        LayerBox = conjur.views.LayerBox,
        PolicyBox = conjur.views.PolicyBox,
        VariableBox = conjur.views.VariableBox,
        UserBox = conjur.views.UserBox,
        Group = conjur.views.Group,
        Host = conjur.views.Host,
        Layer = conjur.views.Layer,
        Policy = conjur.views.Policy,
        User = conjur.views.User,
        Variable = conjur.views.Variable,
        SearchResults = conjur.views.SearchResults;

    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) {
            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) {
                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() {
            React.renderComponent(
                <Dashboard />,
                document.getElementById('content')
            );
        },

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

        users: function() {
            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() {
            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() {
            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() {
            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() {
            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() {
            this.setActiveNav('audit');

            var GlobalAudit = window.GlobalAudit;

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

        search: function(search) {
            SearchResults.search(search);
        }
    });

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