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

  getInitialState: function() {
    return {
      data: null,
      players: [],
      title: "",
      play_to_beat_string: "",
      is_started: false,
      is_joinable: false,
      is_startable: false
    };
  },

  loadGameFromServer: function() {
    $.getJSON(this.props.url, function(result) {
      if (this.isMounted()) {
        this.setState({ data: result });
      }
    }.bind(this));
  },

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

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

  handleStart: function() {
    $.ajax({
      url: this.props.url + '/start',
      type: 'POST',
      dataType: 'json',
      complete: function (jqXHR, textStatus) {
        // callback
      },
      success: function (data, textStatus, jqXHR) {
        // success callback
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // error callback
      }
    });
  },

  handleJoin: function() {
    $.ajax({
      url: this.props.url + '/join',
      type: 'POST',
      dataType: 'json',
      complete: function (jqXHR, textStatus) {
        // callback
      },
      success: function (data, textStatus, jqXHR) {
        // success callback
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // error callback
      }
    });
  },

  render: function() {
    if (!this.state.data) {
      return <div>Loading...</div>;
    }
    return (
      <div id='game-component'>
        <h1>{this.state.data.title}</h1>

        {this.state.data.is_started
          ?
            null
          :
            <section id='game-controls'>
              {/* TODO: If not joinable, show why. i.e. game full*/ }
              {this.state.data.is_joinable ? <button onClick={this.handleJoin}>Join</button> : null }
              {/* TODO: If not startable, show why. i.e. need more players */}
              <div id='start'>
              {this.state.data.is_started ? null : <button onClick={this.handleStart} disabled={this.state.data.is_startable ? null : "disabled" }>Start</button>}
              </div>
            </section>
          }

        <PlayerList
          game={this.state.data}
          onPlayHandSubmit={this.handlePlayHandSubmit} />

        {this.state.data.winner_player_id ? "Winner: " + this.state.data.winner_player_id : null}
      </div>
    );
  }
});