/**@jsx React.DOM*/

var DashboardSearchForm = React.createClass({
  mixins: [ conjur.views.mixins.Search ],

  render: function() {
    return (
    <form id="dashboard-search" className="form-inline search" role="search" onSubmit={this.handleSubmit}>
      <div className="form-group">
        <input ref="input" type="text" className="form-control" placeholder="Search Conjur" value={this.props.searchText}>
        </input>
       </div>
      <button type="submit" className="btn btn-default search-button">Search</button>
    </form>
    );
  }
});

var DashboardFrequent = React.createClass({
  getInitialState: function() {
    return {resources: [], loaded: false}
  },

  componentWillMount: function() {
    $.get("/api/authz/" + conjur.app.configuration.account + "/resources?owner=" + encodeURIComponent(conjur.app.userId), function(data) {
      var filtered_data = data.filter( function(item) {
                   return item.id.split(':')[1]!="secret"; // assets of 'secret' kind are internal
                });
      this.setState({resources: filtered_data, loaded: true});
    }.bind(this));
  },

  render: function() {
    var content,
        OwnedResourcesBox = conjur.views.OwnedResourcesBox;

    if (this.state.loaded)
      content = <OwnedResourcesBox resources={this.state.resources} />
    else
      content = <span>Loading...</span>

    return <section>
      <h3>Owned assets</h3>
      {content}
    </section>;
  }
});

var Dashboard = React.createClass({
  render: function(){
    return (
      <div className="dashboard">
        <div className="row">
          <DashboardSearchForm />
        </div>
        <div className="row summary">
          <div className="col-xs-6">
            <DashboardFrequent />
          </div>
          <div className="col-xs-6 audit">
            <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
          </div>
        </div>
      </div>
    );
  }
});