var Game = React.createClass({
  mixins: [SetIntervalMixin],
  propTypes: {
    title: React.PropTypes.string,
    players: React.PropTypes.array,
    id: React.PropTypes.number,
    source: React.PropTypes.string,
    play_to_beat_string: React.PropTypes.string
  },

  getInitialState: function() {
    return {
      players: [],
      title: "",
      play_to_beat_string: ""
    };
  },

  loadGameFromServer: function() {
    $.get(this.props.source, function(result) {
      if (this.isMounted()) {
        this.setState({
          title: result.title,
          players: result.players,
          current_player_id: result.current_player_id,
          play_to_beat_string: result.play_to_beat_string
        });
      }
    }.bind(this));
  },

  componentDidMount: function() {
    this.loadGameFromServer();
    this.setInterval(this.loadGameFromServer, 3000);
  },

  handlePlayHandSubmit: function(card_ids) {
    $.ajax({
      url: this.props.url + '/play_hand',
      dataType: 'json',
      type: 'PATCH',
      data: card_ids,
      success: function(data) {
        // TODO: Set state instead of this custom method?
        this.loadGameFromServer();
        //this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        //console.log("handlePlay error");
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  render: function() {
    return (
      <div>
        <div>Title: {this.state.title}</div>
        <div>Id: {this.props.id}</div>
        <div>Current Player: {this.state.current_player_id}</div>
        <div>Hand to beat: {this.state.play_to_beat_string}</div>
        <div className='player-list'>
          <PlayerList
            game_id={this.props.id}
            players={this.state.players}
            onPlayHandSubmit={this.handlePlayHandSubmit}
            current_player_id={this.state.current_player_id} />
        </div>
        <div>
        </div>
      </div>
    );
  }
});