/** @jsx React.DOM */

var PermissionsTable = React.createClass({
  render: function() {
    var rows = [];
    var resources = _.sortBy(this.props.resources, function(r){
      return r.id; // this way it will be sorting by (kind, id)
    });
    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 id={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);

    var showhidelink = <div><a onClick={this.props.hideHandler}>Hide all &laquo;</a></div>;

    if (this.props.tabview) {
        showhidelink="";
    }

    if (rows.length==0) {
        return <span>None</span>;
    }

    return <div>
      {showhidelink}
      <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: null, loaded: false, expand: false}
  },

  expand: function(event) {
    this.setState({expand: true})
  },

  collapse: function(event) {
    this.setState({expand: false})
  },

  componentWillMount: function() { // shouldn't it be done in model??? otherwise it will re-load stuff on each re-rendering of parent block
  	if ( this.props.roles ) {
	    $.get(this.url(), function(data){
	      this.setPermissions(data);
	    }.bind(this));
  	}
  },

  setPermissions: function(_resources) {
    /**
     * Filter out owned resources.
     * Filter out permissions on resources which are not held by the current role.
     */
    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;

    var roleSet = {};
    this.props.roles.forEach(function(r) {
    	roleSet[r] = r;
    });

    var cleanResources = resources.filter(function(item) {
    	return item.id.split(':')[1] !== "secret"; // assets of 'secret' kind are internal
    });

    cleanResources.forEach(function(resource) {
    	var permissions = resource.permissions;
    	var hasPermissions = [];
    	permissions.forEach(function(permission) {
      	if ( roleSet.hasOwnProperty(permission['role']) )
      		hasPermissions.push(permission);
    	});
    	resource.permissions = hasPermissions;
    });

    this.setState({resources: cleanResources, loaded: true});
  },

  render: function(){
    var content;
    if (this.state.loaded) {
      if ( this.state.expand || this.props.tabview )
        content = <PermissionsTable resources={this.state.resources} hideHandler={this.collapse} tabview={this.props.tabview}/>
      else
        content = <PermissionsSummary length={this.state.resources.length} expandHandler={this.expand} />
    }
    else {
    	if ( this.props.roles )
    		content = <span>Loading...</span>
  		else
  			content = "You are not authorized to see these permissions";
    }

    var cx = React.addons.classSet;
    var classes = cx({
      permissions: true,
      loading: !this.state.loaded
    });

    var permissionsheader = this.props.tabview ? "" : <h3>Permissions held</h3>;
    return <section className={classes}>
      {permissionsheader}
      <div id="permissionDetails">
        {content}
      </div>
    </section>;
  },

  url: function(){
    return "/api/authz/" + conjur.app.configuration.account + "/resources?acting_as=" + this.props.role;
  }
})