/** @jsx React.DOM */
/* global conjur, React, ReactBootstrap, _ */

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

    var TabbedArea = ReactBootstrap.TabbedArea,
        TabPane = ReactBootstrap.TabPane,
        Tab = conjur.views.mixins.Tab,
        AuditBox = window.AuditBox,
        Breadcrumbs = conjur.views.Breadcrumbs,
        RoleLink = conjur.views.RoleLink,
        HostLink = conjur.views.HostLink;

    var abstractRole = function(expected) {
        return function(role) {
            var tokens = role.split(':'),
                kind = tokens[1],
                abstractKinds = ['@', 'layer'],
                isAbstract = abstractKinds.indexOf(kind) !== -1;

            return isAbstract === expected;
        };
    };

    this.Layer = React.createClass({
        mixins: [Tab],

        render: function() {
            var data = this.props.data;

            var hosts = data.layer.hosts.map(function(host) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <HostLink data={host} />
                  </li>
                );
            });

            var admins = data.admins.filter(abstractRole(false)).map(function(role) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <RoleLink id={role}/>
                  </li>
                );
            });

            var users = data.users.filter(abstractRole(false)).map(function(role) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <RoleLink id={role}/>
                  </li>
                );
            });

            // TODO: controls to add/remove admins/users/hosts
            var overviewTab = (
              <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal">
                  <dt>Owner</dt>
                  <dd><RoleLink id={data.owner} /></dd>

                  <dt>Created by</dt>
                  <dd><RoleLink id={data.layer.userid} /></dd>
                </dl>
              </TabPane>
            );

            var adminsTab = (
              <TabPane key="admins" tab={conjur.utils.getTabname('Admins', admins)}>
                <ul className="list-group">
                  {admins}
                </ul>
              </TabPane>
            );

            var usersTab = (
              <TabPane key="users" tab={conjur.utils.getTabname('Users', users)}>
                <ul className="list-group">
                  {users}
                </ul>
              </TabPane>
            );

            var hostsTab = (
              <TabPane key="hosts" tab={conjur.utils.getTabname('Hosts', hosts)}>
                <ul className="list-group">
                  {hosts}
                </ul>
              </TabPane>
            );

            var auditTab = (
              <TabPane key="audit" tab="Recent Activity">
                <div className="audit auditGroup">
                  <AuditBox roles={[data.layer.roleid]}
                            resources={[data.layer.resource_identifier]}
                            tabview={true} />
                </div>
              </TabPane>
            );


            var permissionsTab = this.permissionsTab(data.layer.roleid),
                membershipsTab = this.membershipsTab(data.layer.roleid),
                annotationsTab = this.annotationsTab(),
                ownedTab = this.ownedTab();

            var tabs = _.compact([
                overviewTab,
                adminsTab,
                usersTab,
                hostsTab,
                ownedTab,
                membershipsTab,
                permissionsTab,
                annotationsTab,
                auditTab
            ]);

            var elems = [
                {url: '/ui/layers', text: 'Layers'},
                {url: '', text: this.props.data.layer.id},
                {url: '', text: '(owned by ' + this.props.data.layer.ownerid + ')'}
            ];

            return (
              <div className="b-layer">
                <Breadcrumbs elems={elems} />
                <hr />
                <h2>Layer {data.layer.id}</h2>
                <TabbedArea defaultActiveKey="overview">
                  {tabs}
                </TabbedArea>
              </div>
            );
        }
    });

}).bind(conjur.views)
(
    conjur,
    React,
    ReactBootstrap,
    _
);