var board = [
    [null, null, null],
    [null, null, null],
    [null, null, null],
];
var player = "X";
var cpu = "O";
var running = true;
var ended = false;

$(document).ready(function () {
    $("#selection-x").on("click", function () {
        if (!running) {
            player = "X";
            cpu = "O";
            $(this).removeClass("selected");
            $(this).addClass("selected");
            $("#selection-o").removeClass("selected");
        }
    });

    $("#selection-o").on("click", function () {
        console.log(running);
        if (!running) {
            player = "O";
            cpu = "X";
            $(this).removeClass("selected");
            $(this).addClass("selected");
            $("#selection-x").removeClass("selected");
        }
    });

    $("#restart").on("click", function () {
        if (!ended) {
            running = false;
            $("#state").text("State: Stopped");
            board = board.map(function (current, x) {
                return current.map(function (current2, y) {
                    var $li = $("ul").find(
                        "[data-x='" + x + "'][data-y='" + y + "']"
                    );
                    $li.text("");
                    return (current2 = null);
                });
            });
            running = true;
            $("#state").text("State: Running");
        }
    });

    $(".spot").on("click", function () {
        if (running) {
            var $li = $(this);
            var x = parseInt($li.data("x"));
            var y = parseInt($li.data("y"));
            var $X = $('<i class="fa fa-times fa-5x"></i>');
            var $O = $('<i class="fa fa-circle-o fa-5x"></i>');
            if (board[x][y] === null) {
                board[x][y] = player;
                var $symbol = player === "X" ? $X : $O;
                $symbol.appendTo($li);

                if (!check()) {
                    bot();
                } else {
                    endGame();
                }
            }
        }
    });
});

function endGame() {
    running = false;
    $("#state").text("State: Stopped");
    ended = true;
    $(".spot").css({
        color: "purple",
    });
    setTimeout(function () {
        board = board.map(function (current, x) {
            return current.map(function (current2, y) {
                var $li = $("ul").find(
                    "[data-x='" + x + "'][data-y='" + y + "']"
                );
                $li.text("");
                return (current2 = null);
            });
        });
        running = true;
        $("#state").text("State: Running");
        $(".spot").removeAttr("style");
        ended = false;
    }, 5000);
}

function bot() {
    var X = Math.floor(Math.random() * 3);
    var Y = Math.floor(Math.random() * 3);
    if (board[X][Y] !== null) {
        bot();
    } else {
        board[X][Y] = cpu;
        var $li = $("ul").find("[data-x='" + X + "'][data-y='" + Y + "']");
        var $X = $('<i class="fa fa-times fa-5x"></i>');
        var $O = $('<i class="fa fa-circle-o fa-5x"></i>');
        var $symbol = cpu === "X" ? $X : $O;
        $symbol.appendTo($li);

        if (check()) {
            endGame();
        }
    }
}

function check() {
    var boardFull = true;
    for (var i = 0; i < board.length; i++) {
        if (board[i].indexOf(null) > -1) {
            boardFull = false;
        }
        if (
            board[i][0] !== null &&
            board[i][0] === board[i][1] &&
            board[i][1] === board[i][2]
        ) {
            return true;
        }
        if (
            board[0][i] !== null &&
            board[0][i] === board[1][i] &&
            board[1][i] === board[2][i]
        ) {
            return true;
        }
    }
    if (
        board[0][0] !== null &&
        board[0][0] === board[1][1] &&
        board[1][1] === board[2][2]
    ) {
        return true;
    }
    if (
        board[0][2] !== null &&
        board[0][2] === board[1][1] &&
        board[1][1] === board[2][0]
    ) {
        return true;
    }

    return boardFull;
}