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

  getInitialState: function() {
    return {
      cards: []
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      if (this.isMounted()) {
        this.setState({
          cards: result
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        <div>Cards:</div>
        <div>
          <ul>
            {this.state.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={"edit_game_" + location.pathname.split("/")[2]} />
                  {card.rank} {card.suit}
                </label>
              </li>;
            })}
          </ul>
        </div>
      </div>
    );
  }
});

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