function Square({ value, onClick, backgroundColor }) {
  return (
    <button 
      className="square" 
      onClick={onClick}
      style={{backgroundColor}}>
      {value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    const isWinningIndex = this.props.winningIndex && this.props.winningIndex.indexOf(i) !== -1
    return (
      <Square 
        key={`button-${i}`}
        value={this.props.squares[i]} 
        onClick={() => this.props.onClick(i)}
        backgroundColor={isWinningIndex && "deepskyblue"}
      />
    );
  }
  
  render() {
    // 3. 사각형들을 만들 때 하드코딩 대신에 두 개의 반복문을 사용하도록 Board를 다시 작성해주세요.
    const boardRows = [];
    for(let i = 0, len = Math.sqrt(this.props.squares.length); i < len; i++) {
      const innerCols = [];
      for(let j = 0; j < len; j++) {
        innerCols.push(this.renderSquare((i * len) + j));
      }
      boardRows.push(
       <div className="board-row" key={`row-${i}`}>
          {innerCols}
       </div> 
      );
    }
    
    return (
      <div>
        {boardRows}
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null),
        currentSquareIndex: null, // question 1
      }],
      stepNumber: 0,
      xIsNext: true,
      isDisplayOrderByAsc: true, // question 4
    }
  }
  
  
  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    // square 배열의 복사본 생성 (불변성)
    const squares = current.squares.slice();
    
    if(calculateWinner(squares) || squares[i]) {
      return
    }
    
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    
    this.setState({
      history: history.concat([{ 
        squares,
        currentSquareIndex: i
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    });
  }
  
  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0,
    });
  }
  
  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);
    
    const moves = history.map((step, move) => {
      // 1. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시해주세요.
      const { x, y } = getCoordBySquareIndex(step.currentSquareIndex); // 1
      const desc = move ?
            `Go to move #${move} - (${x}, ${y})` :
            'Go to game start';
      // *2. 이동 목록에서 현재 선택된 아이템을 굵게 표시해주세요.
      return (
        <li key={move}>
          <button 
            onClick={() => this.jumpTo(move)}
            style={ {"fontWeight": (this.state.stepNumber === move ? "bold" : "normal")} }>
            {desc}
          </button>
        </li>
      );
    });
    
    if(!this.state.isDisplayOrderByAsc) {
      moves.reverse()
    }
    
    // 4. 오름차순이나 내림차순으로 이동을 정렬하도록 토글버튼을 추가해주세요.
    const toggleMoves = () => {
      this.setState({
        isDisplayOrderByAsc: !this.state.isDisplayOrderByAsc
      })
    }
    
    let status;
    let winningIndex; // 이기게 된 원인이 된 스퀘어 번호들
    // null 아니고 O, X 인 경우
    // 6. 승자가 없는 경우 무승부라는 메시지를 표시해주세요.
    if (winner) {
      status = `Winner: ${winner.player}`;

      // 5. 승자가 정해지면 승부의 원인이 된 세 개의 사각형을 강조해주세요.
      winningIndex = winner.winningIndex

    } else if (this.state.stepNumber !== current.squares.length) {
      status = `Next player: ${this.state.xIsNext ? 'X' : 'O'}`
    } else {
      status = "Draw game!"
    }
    
    return (
      <div className="game">
        <div className="game-board">
          <Board 
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
            winningIndex={winningIndex}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <div>
            <button onClick={toggleMoves}>
              {this.state.isDisplayOrderByAsc ? "오름차순 ▲" : "내림차순 ▼"}
            </button>
          </div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    // 한 라인이 O , X 일치하는 경우
    if (squares[a]  && 
        squares[a] === squares[b] && 
        squares[a] === squares[c]) {
      return {
        player: squares[a],
        winningIndex: [a, b, c]
      };
    }
  }
  return null;
}

// 문제 1
function getCoordBySquareIndex(i) {
  return {
    x: Math.floor(i / 3),
    y: i % 3, 
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);