import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { cellGroups } from './Board';
import { BLACK_PIECE, EMPTY_CELL, WHITE_PIECE } from './Cell';
import Player from './Player';

import './Game.css';

const nextPlayer = current_piece => current_piece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE;

class Game extends Component {
  constructor() {
    super();

    this.endGame = this.endGame.bind(this);
    this.findWinner = this.findWinner.bind(this);
    this.handleStartGame = this.handleStartGame.bind(this);
    this.isWaitingFor = this.isWaitingFor.bind(this);
    this.playMove = this.playMove.bind(this);
    this.renderGameButton = this.renderGameButton.bind(this);
    this.resizeBoard = this.resizeBoard.bind(this);

    this.state = {
      firstToPlay: BLACK_PIECE,
      gameStarted: false,
    }
  }

  resizeBoard() {
    this.props.resizeBoard(this.boardSize.value);
  }

  endGame(winMessage) {
    this.setState({
      ...this.state,
      gameStarted: false,
      winMessage,
    });
  }

  findWinner() {
    for (let cellGroup of cellGroups(this.props.board)) {
      const counts = {
        [BLACK_PIECE]: 0,
        [EMPTY_CELL]: 0,
        [WHITE_PIECE]: 0,
      };
      for (let cell of Object.values(cellGroup)) {
        counts[cell.contents] += 1;
      }
      if (counts[EMPTY_CELL] === 0) {
        if (counts[BLACK_PIECE] === 0) {
          return WHITE_PIECE;
        } else if (counts[WHITE_PIECE] === 0) {
          return BLACK_PIECE;
        }
      }
    }
    return null;
  }

  handleStartGame() {
    this.props.resetBoard();
    this.setState({
      ...this.state,
      firstToPlay: nextPlayer(this.state.firstToPlay),
      gameStarted: true,
      moveNumber: 1,
      nextToPlay: this.state.firstToPlay,
      winMessage: null,
    });
  }

  isWaitingFor(piece) {
    return this.state.gameStarted && this.state.nextToPlay === piece;
  }

  playMove(location) {
    this.props.playTurn(
      location,
      this.state.moveNumber,
      this.state.nextToPlay
    );
    this.setState({
      moveNumber: this.state.moveNumber + 1,
      nextToPlay: nextPlayer(this.state.nextToPlay),
      waitingForTurn: false,
    });
    const winner = this.findWinner();
    if (winner === BLACK_PIECE) {
      this.endGame('Black Wins!');
    } else if (winner === WHITE_PIECE) {
      this.endGame('White Wins!');
    } else if (this.state.moveNumber > (this.props.board.columns * this.props.board.rows)) {
      this.endGame('The Game Was Tied!');
    }
  }

  async playNextMove() {
    let controller;
    if (this.state.nextToPlay === BLACK_PIECE) {
      controller = this.blackController;
    } else {
      controller = this.whiteController;
    }
    controller.nextMove(this.playMove);
  }

  renderGameButton() {
    let winMessage = '';
    if (this.state.winMessage) {
      winMessage = (
        <p>{this.state.winMessage}</p>
      )
    }
    if (!this.state.gameStarted) {
      return (
        <div>
          {winMessage}
          <button onClick={this.handleStartGame}>Start Game</button>
        </div>
      )
    }
    return <p>Game in progress...</p>;
  }

  render() {
    return (
      <div>
        <h3>Game Info</h3>
        <div className='board_info'>
          <div>
            <label>Board Size: <input
                defaultValue={15}
                onChange={this.resizeBoard}
                ref={input => this.boardSize = input}
                type='number'
            /></label>
          </div>
          { this.renderGameButton() }
        </div>
        <div className='player_info'>
          <Player
            board={this.props.board}
            colour={BLACK_PIECE}
            index={1}
            nextMoveNumber={this.state.moveNumber}
            playMove={this.playMove}
            ref={input => this.blackController = input}
            waitingForMove={this.isWaitingFor(BLACK_PIECE)}
          />
          <Player
            board={this.props.board}
            colour={WHITE_PIECE}
            index={2}
            nextMoveNumber={this.state.moveNumber}
            playMove={this.playMove}
            ref={input => this.whiteController = input}
            waitingForMove={this.isWaitingFor(WHITE_PIECE)}
          />
        </div>
      </div>
    )
  }
}

export default Game;

@@ -472,32 +472,96 @@
 ner.bind(this);%0A
+    this.handleBoardResize = this.handleBoardResize.bind(this);%0A
     this.handleS
@@ -596,32 +596,32 @@
 ame.bind(this);%0A
-
     this.isWaiti
@@ -769,60 +769,8 @@
 is);
-%0A    this.resizeBoard = this.resizeBoard.bind(this);
 %0A%0A  
@@ -859,81 +859,8 @@
  %7D%0A%0A
-  resizeBoard() %7B%0A    this.props.resizeBoard(this.boardSize.value);%0A  %7D%0A%0A
   en
@@ -1489,16 +1489,95 @@
 l;%0A  %7D%0A%0A
+  handleBoardResize() %7B%0A    this.props.resizeBoard(this.boardSize.value);%0A  %7D%0A%0A
   handle
@@ -2555,248 +2555,8 @@
  %7D%0A%0A
-  async playNextMove() %7B%0A    let controller;%0A    if (this.state.nextToPlay === BLACK_PIECE) %7B%0A      controller = this.blackController;%0A    %7D else %7B%0A      controller = this.whiteController;%0A    %7D%0A    controller.nextMove(this.playMove);%0A  %7D%0A%0A
   re
@@ -3156,27 +3156,33 @@
 e=%7Bthis.
-resiz
+handl
 eBoard
+Resize
 %7D%0A      

Remove more dead code and rename handler