/** @jsx React.DOM */

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




    var overview_tab =
            <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal">
                  <dt>Owner</dt>
                  <dd><RoleLink id={this.props.data.variable.ownerid}/></dd>
                  <dt>Created by</dt>
                  <dd><RoleLink id={this.props.data.variable.userid}/></dd>
                  <dt>MIME type</dt>
                  <dd>{this.props.data.variable.mime_type}</dd>
                  <dt>Kind</dt>
                  <dd>{this.props.data.variable.kind}</dd>
                  <dt>Versions</dt>
                  <dd>{this.props.data.variable.version_count}</dd>
                </dl>
            </TabPane>;
    var updaters_tab =
            <TabPane key="updaters" tab={get_tabname("Updaters",updaters)}>
                <ul className="list-group">
                  {updaters}
                </ul>
            </TabPane>;
    var fetchers_tab =
            <TabPane key="fetchers" tab={get_tabname("Fetchers",fetchers)}>
                <ul className="list-group">
                  {fetchers}
                </ul>
            </TabPane>;
    var  annotations_tab =  this.annotations_tab();

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


    var tabs = _.compact([ overview_tab, updaters_tab, fetchers_tab,
                            annotations_tab, audit_tab ]);

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