/** @jsx React.DOM */

var Group = React.createClass({
  mixins: [conjur.views.mixins.Tab],
  render: function() {
    var members = this.props.data.members.map(function (member) {
      return <li className="list-group-item list-group-item-noborder">
        <RoleLink id={member.member} />
      </li>
    }.bind(this));
    var resourceId = [ conjur.app.configuration.account, 'group', this.props.data.group.id ].join(':')
    var group = this.props.data.group;


    // TODO: refactor (common code should go to mixins)
    // TODO: memberships
    // TODO: controls for members management
    var overview_tab =
            <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal">
                  <dt>Created by</dt>
                  <dd><RoleLink id={group.userid}/></dd>
                  <dt>Owner</dt>
                  <dd><RoleLink id={this.props.data.group.ownerid}/></dd>
                </dl>
           </TabPane>;
    var members_tab =
           <TabPane key="members" tab={get_tabname("Members",members)}>
            <ul className="list-group">
              {members}
            </ul>
           </TabPane>;
    var owned_tab =  this.owned_tab();
    var memberships_tab = this.memberships_tab(group.roleid);
    var permissions_tab = this.permissions_tab(group.roleid);
    var annotations_tab = this.annotations_tab();

    var audit_tab =
          <TabPane key="audit" tab="Recent Activity">
            <div className="audit auditGroup">
              <AuditBox roles={[resourceId]} resources={[resourceId]} tabview={true}/>
            </div>
          </TabPane>;

            <TabPane key="annotations" tab={get_tabname("Annotations",this.props.data.annotations)}>
                <AnnotationsBox annotations={this.props.data.annotations}/>
            </TabPane>;

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

    return (
      <div className="group">
        <h2>Group {this.props.data.group.id}</h2>
        <TabbedArea defaultActiveKey="overview">
           {tabs}
        </TabbedArea>
      </div>
    );
  }
});