class App extends React.Component {
  /***********************************************************
    Initiates the state properties for the App component.
  ************************************************************/
  constructor (props) {
    super(props);
    this.state = {
      human: 'X',
      computer: 'O',
      gameStart: false,
      winner: null,
      winningSequence: [],
      board: [0, 1, 2, 3, 4, 5, 6, 7, 8],
      possibleWins: [
        [0, 1, 2], // Horizontals
        [0, 3, 6],
        [3, 4, 5],
        [1, 4, 7], // Verticals
        [6, 7, 8],
        [2, 5, 8],
        [0, 4, 8], // Diagonals
        [2, 4, 6]
      ],
      showMenu: true
    };
  }

  startGame = human => {
    const computer = human === 'X' ? 'O' : 'X';
    this.setState(
      {
        board: [0, 1, 2, 3, 4, 5, 6, 7, 8],
        winner: null,
        gameStart: true,
        showMenu: false,
        human: human,
        computer: computer
      },
      () => {
        if (human === 'O') this.humanMove(-1, computer);
      }
    );
  };

  /***********************************************************
    Checks if there's a winner, it's a tie or still playing.
  ************************************************************/
  gameOver = board => {
    const possibleWins = this.state.possibleWins;
    for (let i = 0; i < possibleWins.length; i++) {
      const [a, b, c] = possibleWins[i];
      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
        // Returns the winner: X or O.
        this.setState({ winningSequence: possibleWins[i] });
        return board[a];
      }
    }
    if (board.filter(sqr => sqr !== 'X' && sqr !== 'O').length) {
      // Returns true when the game is not finished.
      return false;
    } else {
      // Returns false when it's a tie.
      return 'TIE';
    }
  };

  /***********************************************************
    Handles the click events from the squares of the board.
  ************************************************************/
  play = index => {
    if (this.state.winner || !this.state.gameStart) return false;
    this.humanMove(index, this.state.computer);
  };

  /***********************************************************
    Handles the player's turn. Then, launches the AI.
  ***********************************************************/
  humanMove = (index, computerToken) => {
    const newBoard = [...this.state.board];
    if (index !== -1) {
      if (isNaN(newBoard[index])) return;
      newBoard[index] = this.state.human;
      const computerThink = this.computerThink(newBoard, computerToken);
      newBoard[computerThink.index] = computerToken;
    } else {
      // Faking the first computer's move as it slows the 'thinking' down
      // quite much.
      const randomFirstMove = Math.floor(Math.random() * 9);
      newBoard[randomFirstMove] = computerToken;
    }

    const gameState = this.gameOver(newBoard);
    if (gameState === 'X' || gameState === 'O') {
      this.setState({
        winner: gameState,
        board: newBoard,
        showMenu: true
      });
    } else if (gameState === 'TIE') {
      this.setState({
        winner: 'TIE',
        board: newBoard,
        showMenu: true
      });
    } else {
      this.setState({
        board: newBoard
      });
    }
  };

  /***********************************************************
    Implementation of the MINIMAX algorithm.
    [https://en.wikipedia.org/wiki/Minimax]

    Simulates all possible movements against its opponent
    and returns the score and index of the best moves.
  ************************************************************/
  computerThink = (board, player) => {
    // Has the available empty squares on the board.
    const emptySquares = board.filter(sqr => sqr !== 'X' && sqr !== 'O');

    // Checks if the game is over and returns its final state.
    // Known as the leaves of the tree generated by the algorithm.
    if (this.gameOver(board) === this.state.human) {
      return { score: -10 };
    } else if (this.gameOver(board) === this.state.computer) {
      return { score: 10 };
    } else if (emptySquares.length === 0) {
      return { score: 0 };
    }

    // Holds each move with index and score from the empty squares.
    // E.g.: { index: '' , score: '' }
    let moves = [];

    // Loops through the empty squares array
    for (let i = 0; i < emptySquares.length; i++) {
      let move = {}; // Holds each index/score.
      move.index = board[emptySquares[i]]; // Holds the board's index.
      board[emptySquares[i]] = player; // Simulates a player's move.

      // Changes the player to continue the simulation and makes a recursive
      // call to this method (the MiniMax Algorithm itself).
      if (player === this.state.computer) {
        let newMove = this.computerThink(board, this.state.human);
        move.score = newMove.score;
      } else if (player === this.state.human) {
        var newMove = this.computerThink(board, this.state.computer);
        move.score = newMove.score;
      }

      // Empties the board for the next iteration
      board[emptySquares[i]] = move.index;

      // Includes the simulated move into the moves array.
      moves.push(move);
    }

    // Holds the bestMove, the one which scores the highest for the computer and
    // the lowest for the human.
    let bestMove;

    // Returns the MiniMax scores: 'max' for the computer;'min' for the human.
    if (player === this.state.computer) {
      let bestScore = -5000; // Sets a small enough score to compare.
      for (let i = 0; i < moves.length; i++) {
        if (moves[i].score > bestScore) {
          bestScore = moves[i].score;
          bestMove = i;
        }
      }
    } else if (player === this.state.human) {
      let bestScore = 5000; // Sets a big enough score to compare.
      for (let i = 0; i < moves.length; i++) {
        if (moves[i].score < bestScore) {
          bestScore = moves[i].score;
          bestMove = i;
        }
      }
    }

    // Gives back the best possible moves as an array.
    return moves[bestMove];
  };

  /***********************************************************
    Renders the component and its children into the index.js
  ************************************************************/
  render() {
    return (
      <React.Fragment>
        <Menu
          showMenu={this.state.showMenu}
          startGame={this.startGame}
          winner={this.state.winner}
          players={[this.state.human,this.state.computer]}
        />
        <div className="App">
          {/* "App-hidden" */}
          <section className="Game">
            <Board
              play={this.play}
              gameBoard={this.state.board}
              winner={this.state.winner}
              winningSeq={this.state.winningSequence}
            />
            <Grid didGameStart={this.state.gameStart} />
          </section>
        </div>
      </React.Fragment>
    );
  }
}

const Board = props => {
  const { play, gameBoard, winner, winningSeq } = props;

  const buildSquares = i => {
    return (
      <td>
        <Square
          index={i}
          play={play}
          board={gameBoard}
          winner={winner}
          winningSeq={winningSeq}
        />
      </td>
    );
  };

  return (
    <table>
      <tbody>
        <tr>
          {buildSquares(0)}
          {buildSquares(1)}
          {buildSquares(2)}
        </tr>
        <tr>
          {buildSquares(3)}
          {buildSquares(4)}
          {buildSquares(5)}
        </tr>
        <tr>
          {buildSquares(6)}
          {buildSquares(7)}
          {buildSquares(8)}
        </tr>
      </tbody>
    </table>
  );
};

const Square = props => {
  const { index, play, board, winner, winningSeq } = props;

  const xClasses = i => {
    return [
      board[index] === 'X' ? `cross${i}-shown` : `cross`,
      winner === 'X' && winningSeq.indexOf(index) !== -1 ? `xWon${i}` : '',
      'clickable'
    ].join(' ');
  }
  const oClasses = () => {
    return [
      board[index] === 'O' ? 'circle-shown' : 'circle',
      winner === 'O' && winningSeq.indexOf(index) !== -1 ? 'oWon' : '',
      'clickable'
    ].join(' ');
  }

  return (
    <svg viewBox="0 0 120 120" onClick={() => play(index)}>
      {/* THE X TOKEN SPLIT INTO TWO PATHS */}
      <g>
        <path
          id={`cross1${index}`}
          className={xClasses(1)}
          d="M 20,100 L 100,20"
        />
        <path
          id={`cross2${index}`}
          className={xClasses(2)}
          d="M 100,100 L 20,20"
        />
      </g>
      {/* THE O TOKEN */}
      <circle
        id={`circle${index}`}
        className={oClasses()}
        r={42}
        cy={60}
        cx={60}
        fill="transparent"
        strokeWidth={6}
      />
    </svg>
  );
};

const Grid = props => {
  const animate= i => ( props.didGameStart ? `line animate${i}` : `line` );
  return (
    <svg id="Grid" viewBox="0 0 180 180">
      <g>
        <path className={animate(1)} d="M 0,60 H 180" />
        <path className={animate(2)} d="M 180,120 H 0" />
        <path className={animate(3)} d="M 60,180 V 0" />
        <path className={animate(4)} d="M 120,0 V 180" />
      </g>
    </svg>
  );
};

const Menu = props => {
  const { showMenu, startGame, winner, players } = props;
  const [ human, computer ] = players;

  const buildMenu = () => {
    if (winner === human) {
      return (
        <section id="Menu" className={showMenu ? 'display' : 'display hidden'}>
          <h1 className="title">Congrats! You made it!!</h1>
          <hr />
          <div>
            <p className="menu-text">Wanna try again?</p>
            <button onClick={token => startGame('X')}>X</button>
            <button onClick={token => startGame('O')}>O</button>
          </div>
        </section>
      );
    } else if (winner === computer) {
      return (
        <section id="Menu" className={showMenu ? 'display' : 'display hidden'}>
          <h1 className="title">Oops...Sorry!!</h1>
          <hr />
          <div>
            <p className="menu-text">Want another chance?</p>
            <button onClick={token => startGame('X')}>X</button>
            <button onClick={token => startGame('O')}>O</button>
          </div>
        </section>
      );
    } else if ( winner === 'TIE') {
      return (
        <section id="Menu" className={showMenu ? 'display' : 'display hidden'}>
          <h1 className="title">It was close!</h1>
          <hr />
          <div>
            <p className="menu-text">Wanna do better?</p>
            <button onClick={token => startGame('X')}>X</button>
            <button onClick={token => startGame('O')}>O</button>
          </div>
        </section>
      );
    } else {
      return (
        <section id="Menu" className={showMenu ? 'display' : 'display hidden'}>
          <h1 className="title">Let's play!</h1>
          <hr />
          <div>
            <button onClick={token => startGame('X')}>X</button>
            <button onClick={token => startGame('O')}>O</button>
          </div>
        </section>
      );
    }
  };

  return buildMenu();
};

ReactDOM.render(<App />, document.getElementById('tictactoe'));