/** @jsx React.DOM */

var Layer = React.createClass({
  mixins: [conjur.views.mixins.Tab],
  render: function() {
    function abstractRole(expected) {
      return function(role) {
        var tokens = role.split(':');
        var kind = tokens[1];
        var abstractKinds = [ '@', 'layer' ];
        var isAbstract = abstractKinds.indexOf(kind) !== -1;
        return isAbstract === expected;
      }
    }

    var layer = this.props.data.layer;

    var hosts = layer.hosts.map(function (host) {
      return <li className="list-group-item list-group-item-noborder">
        <HostLink data={host} />
      </li>
    }.bind(this));
    var admins = this.props.data.admins.filter(abstractRole(false)).map(function (role) {
      return <li className="list-group-item list-group-item-noborder">
                <RoleLink id={role}/>
             </li>;
    }.bind(this));
    var users = this.props.data.users.filter(abstractRole(false)).map(function (role) {
      return <li className="list-group-item list-group-item-noborder">
                <RoleLink id={role}/>
             </li>;
    }.bind(this));


    // TODO: controls to add/remove admins/users/hosts
    var overview_tab =
            <TabPane key="overview" tab="Overview">
            <dl className="dl-horizontal">
              <dt>Owner</dt>
              <dd><RoleLink id={layer.ownerid}/></dd>
              <dt>Created by</dt>
              <dd><RoleLink id={layer.userid}/></dd>
            </dl>
            </TabPane>;
    var admins_tab =
            <TabPane key="admins" tab={get_tabname("Admins",admins)}>
            <ul className="list-group">
              {admins}
            </ul>
            </TabPane> ;
    var users_tab =
            <TabPane key="users" tab={ get_tabname("Users", users) } >
                <ul className="list-group">
                  {users}
                </ul>
            </TabPane>;
    var hosts_tab =
            <TabPane key="hosts" tab={ get_tabname("Hosts", hosts) }  >
                <ul className="list-group">
                  {hosts}
                </ul>
            </TabPane>;
    var audit_tab=
            <TabPane key="audit" tab="Recent Activity">
                <div className="audit auditGroup">
                  <AuditBox roles={[layer.roleid]} resources={[layer.resource_identifier]} tabview={true} />
                </div>
            </TabPane>;


    var permissions_tab = this.permissions_tab(layer.roleid);
    var memberships_tab = this.memberships_tab(layer.roleid);
    var annotations_tab = this.annotations_tab();
    var owned_tab       = this.owned_tab();

    var tabs = _.compact( [overview_tab, admins_tab, users_tab, hosts_tab,
                            owned_tab, memberships_tab, permissions_tab,
                            annotations_tab,
                            audit_tab
                          ] );

    return (
      <div className="layer">
        <h2>Layer {layer.id}</h2>

        <TabbedArea defaultActiveKey="overview">
            {tabs}
        </TabbedArea>
      </div>
    );
  }
});