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_show_container" style={{
        display: 'flex',
        flexDirection: 'column'
      }}>
        <div>Title: {this.state.data.title}</div>
        <div>Game Id: {this.state.data.id}</div>
        <div>Current Player: {this.state.data.controlling_player_id}</div>
        <div>Hand to beat: {this.state.data.play_to_beat_string}</div>
        <div className='player-list'>
          <PlayerList
            game_id={this.props.id}
            players={this.state.data.players}
            onPlayHandSubmit={this.handlePlayHandSubmit}
            controlling_player_id={this.state.data.controlling_player_id}
            current_user_id={this.state.data.current_user_id} />
        </div>
        <div>
          {/* 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 */}
          {this.state.data.is_started ? null : <button onClick={this.handleStart} disabled={this.state.data.is_startable ? null : "disabled" }>Start</button>}
        </div>
        <div>
          {this.state.data.winner_player_id ? "Winner: " + this.state.data.winner_player_id : null}
        </div>
      </div>
    );
  }
});
