var Player = React.createClass({
  propTypes: {
    email: React.PropTypes.string,
    id: React.PropTypes.number
  },

  render: function() {
    return (
      <div id={"player-" + this.props.id} className={"player " + (this.props.game.controlling_player_id == this.props.id ? 'has-control' : '')}>
        <div className='email'>{this.props.email}</div>
        {this.props.game.is_started
          ?
          <div>Inventory count: {this.props.inventory_count}</div>
          : null }

        {/* Show player controls if player is owned by current_user  */}
        {(this.props.user_id == this.props.game.current_user_id) && (this.props.game.is_started == true)
          ? (<PlayerControls
            key={this.props.id}
            onPlayHandSubmit={this.props.onPlayHandSubmit}
            game_id={this.props.game.id}
            player_id={this.props.id}
            inventory={this.props.inventory}
            controlling_player_id={this.props.game.controlling_player_id} /> )
          :
            <div className='inventory'>
              {[...Array(this.props.inventory_count)].map((card, index) => <img key={index} src='/assets/cards/png/back-pink.png' />)}
            </div>
        }
      </div>
    );
  }
});