/** @jsx React.DOM */

var PermissionsTable = React.createClass({
  render: function() {
    var rows = [];
    var resources = _.sortBy(this.props.resources, function(r){
      return r.id.split(':')[2];
    });
    resources.forEach(function(r){
      var rowspan = r.permissions.length + 1;
      var parts = r.id.split(":");
      var id = parts[2];
      var kind = parts[1]; // ignore env?
      var cells = [
        <td rowSpan={rowspan}> <ResourceLink data={r.id}/> </td>,
        <td rowSpan={rowspan}> {kind} </td>
      ];
      if(rowspan == 1){
        cells.push(<td colSpan="3"> full permissions </td>);
      }
      
      rows.push(
        <tr key={r.id}>{cells}</tr>
      );
      
      if(rowspan > 1){
        rows.push(r.permissions.map(function(p){
          return <PermissionRow data={p}/>
        }));
      }
      
    });
    rows = _.flatten(rows);

    return <div>
      <div>
        <a onClick={this.props.hideHandler}>Hide all &laquo;</a>
      </div>
      <table>
        <thead>
          <tr>
            <th> Resource </th>
            <th> Kind </th>
            <th> Privilege </th>
            <th> Can Grant? </th>
            <th> Granted By </th>
          </tr>
        </thead>
        <tbody> {rows} </tbody>
      </table>
    </div>
  }
});


// Renders a permission as a tr
var PermissionRow = React.createClass({
  render: function(){
    var p = this.props.data;
    return <tr>
        <td> { p.privilege } </td>
        <td> { p.grant_option ? "yes" : "no" }</td>
        <td> <RoleLink id={p.grantor}/> </td>
      </tr>;
  }
});

var PermissionsSummary = React.createClass({
  render: function() {
    var expand = "";
    if ( this.props.length > 0 )
      expand = <span>
          <br/>
          <span>
            <a  onClick={this.props.expandHandler}>Show all &raquo;</a>
          </span>
        </span>;
      
    return <div>
      <span>
        {this.props.length} permissions
      </span>
      {expand}
    </div>
  }
});

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

  expand: function(event) {
    this.setState({expand: true})
  },
  
  collapse: function(event) {
    this.setState({expand: false})
  },
  
  componentWillMount: function() {
    $.get(this.url(), function(data){
      this.setPermissions(data);
    }.bind(this));
  },
  
  setPermissions: function(_resources) {
    /**
     * Filter out owned resources
     */
    var resources;
    
    if ( this.props.owned ) {
      var ownedIds = _.pluck(this.props.owned, 'id');
      resources = _resources.filter(function(r) {
        return !_.contains(ownedIds, r.id);
      });
    }
    else
      resources = _resources;
    
    this.setState({resources: resources, loaded: true});
  },
  
  render: function(){
    var content;
    if (this.state.loaded) {
      if ( this.state.expand )
        content = <PermissionsTable resources={this.state.resources} hideHandler={this.collapse} />
      else
        content = <PermissionsSummary length={this.state.resources.length} expandHandler={this.expand} />
    }
    else {
      content = <span>Loading...</span>
    }
    
    var cx = React.addons.classSet;
    var classes = cx({
      permissions: true,
      loading: !this.state.loaded
    });
    return <section className={classes}>
      <h3>Permissions held</h3>
      <div id="permissionDetails">
        {content}
      </div>
    </section>;
  },
  
  url: function(){
    return "/api/authz/" + conjurConfiguration.account + "/resources?acting_as=" + this.props.role;
  }
})