var Inventory = React.createClass({
  //  propTypes: {
  //    cards: React.PropTypes.array
  //  },

    getInitialState: function() {
      return {
        cards: this.props.cards
      };
    },

  //  componentDidMount: function() {
  //    $.get(this.props.source, function(result) {
  //      console.log("Hi from inventory didmount");
  //      if (this.isMounted()) {
  //        this.setState({
  //          cards: result
  //        });
  //      }
  //    }.bind(this));
  //  },

  render: function() {
    if (this.props.cards) {
      return (
        <div>
          Inventory:
          <ul>
            {this.props.cards.map(function(card) {
              return <li key={card.id}>
                <label>
                  {/* TODO: Better method of assigning form value */}
                  <input type="checkbox" name="player_card_ids[]" value={card.id} form={"player_controls_" + card.player_id} />
                  {card.rank} {card.suit}
                </label>
              </li>;
            })}
          </ul>
        </div>
      );
    }
    else {
      return (<div></div>);
    }
  }
});

// TODO: Remove this?
//$(document).on("page:change", function() {
//  if (document.getElementById("inventory") != null) {
//    React.render(
//      <Inventory source={document.URL + "/my-inventory.json"} />, document.getElementById('inventory')
//    );
//  }
//})