/** @jsx React.DOM */

var TodoList = React.createClass({

  handleDoneToggle: function(i) {

    this.props.onDoneToggle(i);

  },

  render: function() {

    var createItem = function(item, i) {

      return <li onClick={this.handleDoneToggle.bind(null, i)}>

        {item.text}

        {item.done && " (done)"}

      </li>;

    };

    return <ul>{this.props.items.map(createItem, this)}</ul>;

  }

});

var TodoApp = React.createClass({

  getInitialState: function() {

    return {items: [], text: ''};

  },

  onChange: function(e) {

    this.setState({text: e.target.value});

  },

  handleSubmit: function(e) {

    e.preventDefault();

    var nextItems = this.state.items.concat([

      {text: this.state.text, done: false}

    ]);

    var nextText = '';

    this.setState({items: nextItems, text: nextText});

  },

  handleDoneToggle: function(i) {

    var nextItems = this.state.items.slice();

    nextItems[i] = {

      text: nextItems[i].text,

      done: !nextItems[i].done

    };

    this.setState({items: nextItems});

  },

  render: function() {

    return (

      <div>

        <h3>TODO</h3>

        <TodoList items={this.state.items}

          onDoneToggle={this.handleDoneToggle} />

        <form onSubmit={this.handleSubmit}>

          <input onChange={this.onChange} value={this.state.text} />

          <button>{'Add #' + (this.state.items.length + 1)}</button>

        </form>

      </div>

    );

  }

});

React.renderComponent(<TodoApp />, document.body);