/** @jsx React.DOM */

(function(conjur, React) {
    'use strict';

    var GenericListItem = React.createClass({
        render: function() {
            var recordUrl = '/ui/'
                    + this.props.data.kind
                    + '/'
                    + window.encodeURIComponent(this.props.data.record.identifier);

            return (
              <tr>
                <td className="id">
                  <a href={recordUrl}>
                    {this.props.data.record.identifier}
                  </a>
                </td>
                <td className="ownerId">
                  <RoleLink id={this.props.data.record.ownerid || this.props.data.record.owner} />
                </td>
              </tr>
            );
        }
    });

    var GenericList = this.GenericList = React.createClass({
        getInitialState: function() {
            return {
                sort: {
                    column: this.props.defaultColumn || 'id',
                    order: this.props.defaultOrder || 'asc'
                },
                columns: this.props.columns || {
                    id: {
                        id: 'id',
                        name: 'Id',
                        defaultSortOrder: 'desc'
                    },
                    owner: {
                        id: 'owner',
                        name: 'Owner',
                        defaultSortOrder: 'desc'
                    }
                }
            };
        },

        sortColumn: function(column) {
            return function(e) {
                e.preventDefault();

                var order = (this.state.sort.order === 'asc') ? 'desc' : 'asc';

                if (this.state.sort.column != column) {
                    order = this.state.columns[column].defaultSortOrder;
                }

                this.setState({sort: {column: column, order: order}});
            }.bind(this);
        },

        sortClass: function(column) {
            var order = (this.state.sort.order === 'asc') ?
                    'glyphicon glyphicon-chevron-up' : 'glyphicon glyphicon-chevron-down';

            return (this.state.sort.column === column) ? order : '';
        },

        render: function() {
            var items = this.props.data.members.map(function(o) {
                return o;
            });

            items = _.sortBy(items, this.state.sort.column);
            if (this.state.sort.order === 'desc') items.reverse();

            var rows = items.map(function (o) {
                var componentName = _.str.capitalize(
                    this.props.data.kind.substring(0, this.props.data.kind.length-1)
                ) + 'ListItem';

                var itemKind = window[componentName] || GenericListItem; // Caution!
                return itemKind({data: {kind: this.props.data.kind, record: o}, key: o.id});
            }.bind(this));

            var columns = _.values(this.state.columns).map(function(c) {
                return (
                  <th onClick={this.sortColumn(c.id)} key={c.id} >
                    {c.name}<span className={'header ' + this.sortClass(c.id)} />
                  </th>
                );
            }, this);

            return (
              <table className={this.props.data.kind + 'List'}>
                <thead>
                  <tr>
                    {columns}
                  </tr>
                </thead>
                <tbody>
                  {rows}
                </tbody>
              </table>
            );
        }
    });

}).bind(conjur.views)
(
    conjur,
    React
);