var React = require('react');

var ResourceLink = require('../generic/resource_link'),
    RoleLink = require('../generic/role_link');

import {sortBy, flatten} from 'lodash';

// Renders a permission as a tr
var PermissionRow = React.createClass({
    displayName: 'PermissionRow',

    render() {
        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>
        );
    }
});

export default React.createClass({
    displayName: 'PermissionsTable',

    render() {
        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,
                parts = r.id.split(':'),
                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>
        );
    }
});