/** @jsx React.DOM */

'use strict';

var _ = require('lodash');
var React = require('react');

var api = require('./api.js');
var AnimatableComponent = require('./AnimatableComponent.js');


var TableView = React.createClass({
    getInitialState: function() {
        return {
            items: [],
            updatedItem: null
        };
    },
    componentWillMount: function() {
        this.load();
    },
    load: function() {
        api.load(function(res) {
            if(res.ok && !res.noContent) {
                this.setState({ items: res.body });
            }
        }.bind(this));
    },
    handleAnimationIteration: function(item, e) {
        console.log('Item ' + item.id + ' animation iteration count: ' + item.animationIterationCount);
    },
    handleAnimationStart: function(item, e) {
        console.log('Item ' + item.id + ' is animating');
    },
    handleAnimationStop: function(item, e) {
        console.log('Item ' + item.id + ' has stopped animating');
    },
    render: function() {
        var rows = _.map(this.state.items, function(item) {
            return (
                <AnimatableComponent
                tag={ React.DOM.tr }
                className="table-row"
                animationClass="flash"
                shouldStartAnimation={ item === this.updatedItem }
                onAnimationStart={ this.handleAnimationStart }
                onAnimationIteration={ this.handleAnimationIteration }
                onAnimationStop={ this.handleAnimationStop }
                removeOnComplete={ true }
                key={ 'row-' + item.id }>
                    <td>{ item.A }</td>
                    <td>{ item.B }</td>
                    <td>{ item.C }</td>
                    <td>{ item.D }</td>
                </AnimatableComponent>
            );
        }).bind(this);
        return (
            <table>
                <thead>
                    <tr>
                        <th>A</th>
                        <th>B</th>
                        <th>C</th>
                        <th>D</th>
                    </tr>
                </thead>
                { rows }
            </table>
        );
    }
});

module.exports = TableView;