var React = require('react'),
    update = require('react/lib/update');

import {sortByOrder} from 'lodash';

var AuditEntry = require('./entry'),
    AuditTableHeader = require('./table_header'),
    Refresh = require('../refresh/refresh');

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

    propTypes: {
        caption: React.PropTypes.string,
        compact: React.PropTypes.bool,
        events: React.PropTypes.array,
        isLoading: React.PropTypes.bool
    },

    getDefaultProps() {
        return {
            caption: 'Audit',
            compact: false,
            events: [],
            isLoading: false
        };
    },

    render() {
        var entries = sortByOrder(this.props.events, ['id'], [false]).map((event) => {
            // new way to clone objects, custom clone$ does not work no more as expected
            var args = update(event, {
                $merge: {
                    key: event.id,
                    compact: this.props.compact
                }
            });

            return (
              <AuditEntry {...args} />
            );
        });

        var title;

        if (this.props.caption !== '') {
            title = (
              <h3>{this.props.caption}<Refresh show={this.props.isLoading} /></h3>
            );
        }

        return (
          <section className="audit">
            {title}
            <table className="audit-table">
              <AuditTableHeader key="thead" compact={this.props.compact} />
              <tbody key="tbody">
                {entries}
              </tbody>
            </table>
          </section>
        );
    }
});