/**
 * @jsx React.DOM
 */
(function() {
    var TreatsModel = Backbone.Collection.extend({
        // TODO: Add url for fetching from server
    });

    var treatsModel = new TreatsModel([
        { type: 'bone'  },
        { type: 'bacon' },
        { type: 'steak' }
    ]);

    var Treat = React.createBackboneClass({
        componentDidMount: function() {
            $(this.getDOMNode()).hide().fadeIn(50);
        },

        render: function() {
            var src = 'img/icon_' + this.props.model.get('type') + '.png';
            return (
                <li>
                    <img src={src}/>
                </li>
            );
        }
    });

    var Treats = React.createBackboneClass({
        render: function() {
            var treats = this.props.model.map(function (treat) {
                return <Treat model={treat} />;
            });

            return (
              <ul className="inline treats">
                {treats}
              </ul>
            );
        }
    });

    var Dog = React.createBackboneClass({
        getInitialState: function() {
            return {
                moodRating: 0,
                mood: this.getMood(0)
            };
        },

        getMood: function(moodRating) {
            if(moodRating > 5) {
                return 'happy';
            } else if(moodRating > 0) {
                return 'excited';
            } else {
                return 'sad';
            }
        },

        updateMood: function(treat) {
            var moodRating = this.state.moodRating;
            
            if(!treat) {
                moodRating -=2;
                if(moodRating < 0) moodRating = 0;
            } else {
                var treatType = treat.get('type');

                if(treatType == 'steak') {
                    moodRating += 3;
                } else if(treatType == 'bacon') {
                    moodRating += 2;
                } else {
                    moodRating++;
                }
                
                if(moodRating > 10) moodRating = 10;
            }

            this.setState({
                moodRating: moodRating,
                mood: this.getMood(moodRating)
            });
        },

        eatTreat: function() {
            var treat = this.props.model.pop();
            this.updateMood(treat);
        },

        componentDidMount: function() {
            var timer = Math.random() * 1500 + 1500;
            setInterval(this.eatTreat.bind(this), timer);
        },

        render: function() {
            var src = 'img/dog_' + this.state.mood + '.jpg';
            return (
                <div className="dog"><img src={src}/></div>
            ); 
        }
    });

    var DogFooder = React.createBackboneClass({
        giveTreat: function() {
            var type;
            var rand = Math.random();
            if(rand > 0.85) {
                type = 'steak';
            } else if(rand > 0.6) {
                type = 'bacon';
            } else {
                type = 'bone';
            }

            this.props.model.add({ type: type });
        },

        takeTreat: function() {
            if(this.props.model.length == 0) return;
            this.props.model.pop();
        },

        render: function() {
            var model = this.props.model;
            var addButtonState = model.length > 0 ? '' : ' disabled';

            return (
                <div>
                    <Dog model={model} />
                    <Dog model={model} />
                    <h3>Treats: {model.length}</h3>
                    <Treats model={model}/>
                    <br/>
                    <div>
                        <button className="btn btn-large btn-success" onClick={this.giveTreat}>Good dog!</button>
                        {'  '}
                        <button className={'btn btn-large btn-danger ' + addButtonState} onClick={this.takeTreat}>Bad dog!</button>
                    </div>
                </div>
            );
        }
    });

    React.renderComponent(<DogFooder model={treatsModel}/>, document.getElementById('doggy-app'));
})();