/**@jsx React.DOM*/

var SearchGroupTitle = React.createClass({
  render: function(){
     return <span>{this.title()}</span>
  },
  
  title: function(){
    var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
    words[words.length - 1] = pluralize(words[words.length - 1]);
    return words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')';  
  }
});

var SearchGroupHeading = React.createClass({
  render: function(){
    var targetId = "#search-collapse-" + this.props.data.kind;
    return <div className="panel-heading">
      <h4 className="panel-title">
        <a data-toggle="collapse" data-target={targetId} 
          className={'group-heading' + this.props.data.kind}>
          <SearchGroupTitle data={this.props.data} />
       </a>
     </h4>
   </div>;
  },
  
  title: function(){
    var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
    words[words.length - 1] = pluralize(words[words.length - 1]);
    return words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')';  
  }
});

var SearchResultItem = React.createClass({
  render: function(){
    return <div className="item"> 
      <h4> { this.titleLink() } </h4>
      <div className="details">
        <strong> ID: </strong> <ResourceLink data={this.props.data.id} noIcon="true"/> 
        <strong> Owner: </strong> <RoleLink id={this.props.data.owner} noIcon="true"/>
      </div>
      <div className="comment">
        {this.commentText()}
      </div>
    </div>;
  },
  
  commentText: function(){
    var annots = this.annotationsMap();
    return annots['description'] || "";
  },
  
  titleLink: function(){
    var annots = this.annotationsMap();
    return <ResourceLink data={this.props.data.id} text={annots['name']}/>
  },
  
  annotationsMap: function(){
    if(this._annotationsMap) return this._annotationsMap;
    var map = this._annotationsMap = {};
    (this.props.data.annotations || []).forEach(function(a){
      map[a.name] = a.value;
    });
    return map;
  }
});
  
// accepts props like data: { kind:"", items:[] } 
var SearchGroup = React.createClass({ 
  render: function(){
    var id = "search-group-" + this.props.data.kind;
    var items = this.props.data.items.map(function(r){
      return <SearchResultItem data={r}/>
    })
    return <div id={id} className="panel panel-default search-group">
      <SearchGroupHeading data={this.props.data}/>
      <div id={"search-collapse-" + this.props.data.kind} className="panel-collapse collapse in">
        <div className="panel-body">
          {items}
        </div>
      </div>
   </div>;
  }
});

var SearchResults = React.createClass({
  render: function() {
    var results = this.props.data.results;
    var grouped = _.groupBy(results, function(r){
      return r.id.split(':')[1];
    }); 
    // Don't care about these
    delete grouped['environment-variables']
    delete grouped['notification']
    delete grouped['queue']

    var groups = _.map(grouped,function(items, key){
      var data = {items:items, kind: key}; // - prevent editor barfing
      return <SearchGroup data={data}/>
    });
    var scores = {
      'policy':   0,
      'layer':    1,
      'group':    2,
      'host':     3,
      'user':     4,
      'variable': 5,
      'key_pair': 6
    };
    
    groups.sort(function(a, b) {
      return ( scores[a.props.data.kind] || 100 ) - ( scores[b.props.data.kind] || 100 );
    });
    var toc = groups.map(function(g) {
      var gid = "#search-group-" + g.props.data.kind;
      return <div className="toc-item">
          <a href={gid}><SearchGroupTitle data={g.props.data} /></a>
        </div>
    });
    var heading = "Found " + this.props.data.results.length + 
      " resources matching \"" + this.props.data.search + "\"";
    return (
      <div id="searchResults">
        <div className="searchResults"> 
          <h3> { heading } </h3>
          <div className="search-results-toc">
            {toc}
          </div>
          <div className="search-results">
            {groups}
          </div>
        </div>
      </div>
    );
  }
});

SearchResults.search = function(search, container){
  container = container || document.getElementById('content');
  $.get(endpoints.authz("resources", {search: search}), function(results){
    
    var data = {search: search, results: results};
    React.renderComponent(<SearchResults data={data}/>, container);
  });
}