class TicTacToe extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      0: "", 1: "", 2: "",
      3: "", 4: "", 5: "",
      6: "", 7: "", 8: "",
      score: 0,
      player: "times",
      ai: "circle-o",
      status: "game",
      text: "Choose your symbol",
      style: {
        display: "block"
      }
    }
  }
  
  chooseAvatar(avatar) {
    if(avatar != "x") {
      this.setState({
        player: "circle-o",
        ai: "times"
      }, this.startGame);
    } else {
      this.startGame();
    }
  }
  
  startGame() {
    const startFields = [0, 2, 6, 8];
    this.setState({ 
      style: { 
        display: "none" 
        },
      [_.sample(startFields)]: this.state.ai
    });
  }
  
  emptyFields(board) {
    return board.filter(entry => entry != this.state.player && entry != this.state.ai);
  }
  
  renderPlayField(playField) {
    return _.take(playField, 9).map(entry => {
      if(entry[1] == "") {
        return entry[0];
      } else return entry[1]
    });
  }
  
  newGame() {
    this.setState({
      0: "", 1: "", 2: "",
      3: "", 4: "", 5: "",
      6: "", 7: "", 8: "",
      status: "game"
    }, this.startGame);
  }
  
  winning(board, player) {
    if((board[0] == player && board[1] == player && board[2] == player) ||
       (board[3] == player && board[4] == player && board[5] == player) ||
       (board[6] == player && board[7] == player && board[8] == player) ||
       (board[0] == player && board[3] == player && board[6] == player) ||
       (board[1] == player && board[4] == player && board[7] == player) ||
       (board[2] == player && board[5] == player && board[8] == player) ||
       (board[0] == player && board[4] == player && board[8] == player) ||
       (board[2] == player && board[4] == player && board[6] == player) ) {
      return true
    } else return false;
  }
  
  componentDidUpdate() {
    let playField = this.renderPlayField(Object.entries(this.state));
    let openFields = this.emptyFields(playField);

    if(this.winning(playField, this.state.ai) && this.state.status != "lost" && this.state.status != "drawed" && openFields.length !== 0) {
      setTimeout(() => {
        this.setState({
          status: "lost",
          text: "You Lost! Do you want to play again?",
          score: this.state.score + 1, 
          style: {
            display: "block"
          }
        })
      }, 300);
    } else if(openFields.length == 0 && this.state.status == "game") {
      setTimeout(() => {
        this.setState({ 
          status: "drawed",
          text: "You Drawed! Do you want to play again?",
          style: {
            display: "block"
          }
        })
      }, 300);
    }
  }
  
  miniMax(newBoard, player){
  //available spots
  let openFields = this.emptyFields(newBoard);

  // checks for the terminal states such as win, lose, and tie and returning a value accordingly
  if (this.winning(newBoard, this.state.player)) {
     return { score:-10 };
  }
	else if (this.winning(newBoard, this.state.ai)) {
    return { score:10 };
	}
  else if (openFields.length == 0) {
  	return { score:0 };
  }

// an array to collect all the objects
  let moves = [];

  // loop through available spots
  for(let i = 0; i < openFields.length; i++){
    //create an object for each and store the index of that spot that was stored as a number in the object's index key
    let move = {};
  	move.index = newBoard[openFields[i]];

    // set the empty spot to the current player
    newBoard[openFields[i]] = player;

    //if collect the score resulted from calling minimax on the opponent of the current player
    if (player == this.state.ai){
      let result = this.miniMax(newBoard, this.state.player);
      move.score = result.score;
    }
    else {
      let result = this.miniMax(newBoard, this.state.ai);
      move.score = result.score;
    }
    //reset the spot to empty
    newBoard[openFields[i]] = move.index;
    // push the object to the array
    moves.push(move);
  }
// if it is the computer's turn loop over the moves and choose the move with the highest score
  let bestMove;
  if(player === this.state.ai){
    let bestScore = -10000;
    for(let k = 0; k < moves.length; k++){
      if(moves[k].score > bestScore){
        bestScore = moves[k].score;
        bestMove = k;
      }
    }
  } else {
// else loop over the moves and choose the move with the lowest score
    let bestScore = 10000;
    for(var j = 0; j < moves.length; j++){
      if(moves[j].score < bestScore){
        bestScore = moves[j].score;
        bestMove = j;
      }
    }
  }
// return the chosen move (object) from the array to the higher depth
  return moves[bestMove];
}
  
  setStone(field) {
    if(this.state[field] != "") {
      return;
    } 
    
    this.setState({ [parseInt(field)]: this.state.player }, () => {
      let playField = this.renderPlayField(Object.entries(this.state));
      let aiMove = this.miniMax(playField, this.state.ai);
      
      this.setState({ [parseInt(aiMove.index)]: this.state.ai });
    });
  }
  
  render() {
    let counter = 0;
    const avatars = [{ value: "x", icon: "times" }, { value: "o", icon: "circle-o" }];
    const listAvatars = avatars.map(avatar => {
      return(
        <div className="w3-half">
          <button className="w3-btn w3-white w3-border"
            onClick={ () => this.chooseAvatar(avatar.value)}>
            <i className={`fa fa-${avatar.icon}`}></i>
          </button>
        </div>
      );
    });
    
    const playAgain = (
      <div>
        <div className="w3-half">
              <button className="w3-btn w3-green" onClick={() => this.newGame() }>Yes</button>     
        </div>

        <div className="w3-half">
          <button className="w3-btn w3-red" 
            onClick={() => this.setState({ style: { display: "none" } })}>No</button>      
        </div>
      </div>
    );
    
    return(
      <div id="wrapper">
        <Modal style={ this.state.style} text={ this.state.text } listAvatars={ listAvatars } playAgain={ playAgain } status={ this.state.status }/>
        
        <h2 id="score">Computer { this.state.score } : 0 Player</h2>

        <div id="main">
          {
            _.times(3, () => {             
              return( 
                <div className="outer-field w3-border">
                  { _.times(3, () => {
                    return(
                      <button id={ counter } className="inner-field w3-border"
                        value={ counter }
                        onClick={ event => this.setStone(event.target.value) }>
                        { <i className={`fa fa-${this.state[counter++]}`}></i> }
                      </button>
                    )
                  }) }
                </div>
              );
            })
          }
        </div>
               <footer className="footer">
          <p>
            Created by: &nbsp;
            <a href="https://codepen.io/Gh05d/full/WEmwPr/" target="_blank">
               Gh05d
            </a>
          </p>
          <p><time>{new Date().getFullYear()}</time></p>
        </footer> 
      </div>
    );
  }
}

const Modal = ({ style, text, listAvatars, playAgain, status }) => (
  <div style={ style } className="w3-modal">
    <div className="w3-modal-content w3-card-4">
      <div className="modal-background">
        <header className="w3-container w3-gray">
          <h2>{ text }</h2>
        </header>
        <div className="w3-container buttons">
          { status == "game" ? listAvatars : playAgain }
        </div>

        <footer className="w3-container w3-gray">
          <p>Have fun...</p>
        </footer>
      </div>
    </div>
  </div>
);
    
ReactDOM.render(<TicTacToe />, document.getElementById("app"));