'use strict';

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];
		if (squares[a] && squares[a] === squares[b] &&
				squares[a] === squares[c])
			return squares[a];
	}

	return null;
}

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

const Board = ({ xIsNext, squares, onPlay }) => {
	function handler(i) {
		if (squares[i] || calculateWinner(squares))
			return;

		const nextSquares = squares.slice();
		nextSquares[i] = xIsNext ? "X" : "O";

		return onPlay(nextSquares);
	}

	const winner = calculateWinner(squares);
	let status = winner ? "Winner: "+winner
		: "Next player: " + (xIsNext ? "X" : "O");

	return (
		<div>
			<div className="status">{status}</div>
			<div className="board-row">
				<Square value={squares[0]} onClick={() => handler(0)} />
				<Square value={squares[1]} onClick={() => handler(1)} />
				<Square value={squares[2]} onClick={() => handler(2)} />
			</div>
			<div className="board-row">
				<Square value={squares[3]} onClick={() => handler(3)} />
				<Square value={squares[4]} onClick={() => handler(4)} />
				<Square value={squares[5]} onClick={() => handler(5)} />
			</div>
			<div className="board-row">
				<Square value={squares[6]} onClick={() => handler(6)} />
				<Square value={squares[7]} onClick={() => handler(7)} />
				<Square value={squares[8]} onClick={() => handler(8)} />
			</div>
		</div>
	);
}

const Game = () => {
	const [history, setHistory] = React.useState([Array(9).fill(null)]);
	const [currentMove, setCurrentMove] = React.useState(0);
	const currentSquares = history[currentMove];
	var xIsNext = currentMove % 2 == 0;

	function handlePlay(nextSquares) {
		const nextHistory = [...history.slice(0, currentMove+1),
			nextSquares];

		setHistory(nextHistory);
		setCurrentMove(nextHistory.length-1);
	}

	function jumpTo(nextMove) { setCurrentMove(nextMove); }

	const moves = history.map((squares, move) => {
		let descr = move > 0 ? "Go to move #"+move
			: "Go to game start";
		return (
			<li key={move}>
				<button onClick={() => jumpTo(move)}>{descr}</button>
			</li>
		);
	});

	return (
		<div className="game">
			<div className="game-board">
				<Board xIsNext={xIsNext} squares={currentSquares}
					onPlay={handlePlay} />
			</div>
			<div className="game-info">
				<ol>{moves}</ol>
			</div>
		</div>
	)
}

const root = ReactDOM.createRoot(document.getElementById("react-root"));
root.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>
);

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];
		if (squares[a] && squares[a] === squares[b] &&
				squares[a] === squares[c])
			return squares[a];
	}

	return null;
}

function mksquare(S, i, onclick) {
	let p = document.createElement("button");
	p.className = "square";

	p.build = () => { p.innerText = S.squares()[i]; }

	p.addEventListener("click", () => { onclick(i); p.build(); });

	return p;
}

function mkstatus(S) {
	let p = document.createElement("div");
	p.className = "status";

	(p.build = function() {
		let w = calculateWinner(S.squares());
		p.innerText = w ? "Winner: "+w
			: "Next player: "+(S.xnext() ? "X" : "O");
	})();

	return p;
}

function mkboard(S, onplay) {
	let p = document.createElement("div");
	p.className = "game-board";

	let pstatus = mkstatus(S);
	p.appendChild(pstatus);

	function handleclick(i) {
		if (S.squares()[i] || calculateWinner(S.squares()))
			return;

		let next = S.squares().slice();
		next[i]  = S.xnext() ? "X" : "O";

		onplay(next); pstatus.build();
	}

	var rs = [];

	for (let i = 0; i < 3; i++) {
		let q = document.createElement("div");
		q.className = "board-row";

		for (let j = 0; j < 3; j++) {
			var r = mksquare(S, (i*3) + j, handleclick);
			q.appendChild(r); rs.push(r);
		}

		p.appendChild(q);
	}

	p.build = () => { pstatus.build(); rs.forEach(r => r.build()); }

	return p;
}

function mkinfo(S, jumpto) {
	let p = document.createElement("div");
	p.className = "game-info";

	let ol = document.createElement("ol");

	p.appendChild(ol);

	(p.build = function() {
		ol.innerHTML = "";
		for (let i = 0; i < S.history.length; i++) {
			let li = document.createElement("li");
			let b  = document.createElement("button");
			b.innerText = i > 0	? "Go to move #"+i : "Go to game start";
			b.addEventListener("click", () => jumpto(i));
			li.appendChild(b);
			ol.appendChild(li);
		}
	})();

	return p;
}

function mkgame(S) {
	let p = document.createElement("div"); p.className = "game";

	S.history = [Array(9).fill(null)];
	S.move    = 0;

	// wrap access to current board / player
	S.squares = () =>  S.history[S.move];
	S.xnext   = () =>  S.move % 2 == 0;

	function handleplay(next) {
		S.history = [...S.history.slice(0, S.move+1), next];
		S.move = S.history.length-1;
		pinfo.build();
	}

	let pboard = mkboard(S, handleplay);

	function jumpto(m) { S.move = m; pboard.build(); pinfo.build(); }

	let pinfo  = mkinfo(S, jumpto);

	p.append(pboard, pinfo);

	return p;
}

window.addEventListener('load', function() {
	document.getElementById("bare-root").replaceWith(mkgame({}));
});