/** @jsx React.DOM */

//var ReactBootstrap=root.ReactBootstrap;
var TabbedArea = ReactBootstrap.TabbedArea;
var TabPane    = ReactBootstrap.TabPane;

var User = React.createClass({
  mixins: [conjur.views.mixins.Tab],
  render: function(){
   var user = this.props.data.user;

   // TODO: refactor
   // TODO: show public keys
   // TODO: actions menu (e.g. 'upload public key', 'add annotation')
   // TODO: memberships panel
   var overview_tab =
            <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal">
                  <dt>Created by</dt>
                  <dd><RoleLink id={user.userid}/></dd>
                  <dt>Owner</dt>
                  <dd><RoleLink id={user.ownerid}/></dd>
                  <dt>Uidnumber</dt>
                  <dd>{user.uidnumber}</dd>
                </dl>
            </TabPane>;

    var audit_tab=
            <TabPane key="audit" tab="Recent Activity">
                <div className="audit auditUser">
                  <AuditBox roles={[user.roleid]} resources={[user.resource_identifier]} tabview={true}/>
                </div>
            </TabPane>;

    var pubkeys_list = this.props.data.pubkeys.map(function(k) {
    	var tokens = k.split(" ");
			return <li className="list-group-item list-group-item-noborder">
				<span className="badge">{tokens[0]}</span>
				{tokens[tokens.length-1]}
			</li>
		});
    var pubkeys_tab = <TabPane key="pubkeys" tab={get_tabname("Public Keys", this.props.data.pubkeys)}>
		  <div className="pubkeys pubkeysUser">
		  	<ul className="list-group">
		  		{pubkeys_list}
		  	</ul>
		  </div>
		</TabPane>;

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

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


    return (
      <div className="user">
        <h2> User {user.login} </h2>
        <TabbedArea defaultActiveKey="overview">
            {tabs}
        </TabbedArea>
      </div>
    );
  }
});