var gameField = [
  [0, 0, 0],
  [0, 0, 0],
  [0, 0, 0],
];

// TODO: Random Turns at beginning.
var turn = 1;

let cells = [];

let scoreX = 0;
let scoreO = 0;

let unableToPlay = false;

const winner = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 4, 8],
  [2, 4, 6],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
];

function init() {
  cells = Array.from(document.getElementsByClassName("cell"));

  //Needs to be done this way and not in a loop because of event bubbling.
  document.getElementById("cell-0").addEventListener("click", function () {
    clickEvent(0);
  });
  document.getElementById("cell-1").addEventListener("click", function () {
    clickEvent(1);
  });
  document.getElementById("cell-2").addEventListener("click", function () {
    clickEvent(2);
  });
  document.getElementById("cell-3").addEventListener("click", function () {
    clickEvent(3);
  });
  document.getElementById("cell-4").addEventListener("click", function () {
    clickEvent(4);
  });
  document.getElementById("cell-5").addEventListener("click", function () {
    clickEvent(5);
  });
  document.getElementById("cell-6").addEventListener("click", function () {
    clickEvent(6);
  });
  document.getElementById("cell-7").addEventListener("click", function () {
    clickEvent(7);
  });
  document.getElementById("cell-8").addEventListener("click", function () {
    clickEvent(8);
  });
}

function startGame() {
  gameField = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0],
  ];
  document.getElementById("outputResult").innerHTML = "";
  unableToPlay = false;

  for (cell of cells) {
    cell.style.backgroundColor = "#131313";
  }

  drawBoard();
}

function checkWinner() {
  for (let item of winner) {
    let winningRowValue = 0;

    item.forEach((val) => (winningRowValue += getCellValueByIndex(val)));

    if (winningRowValue == 3) {
      document.getElementById("outputResult").innerHTML = "P1 won.";
      increaseXScore();
      item.forEach(
        (val) =>
          (document.getElementById("cell-" + val).style.backgroundColor =
            "#2274A5")
      );
      unableToPlay = true;
      return 1;
    } else if (winningRowValue == -3) {
      document.getElementById("outputResult").innerHTML = "P2 won.";
      increaseOScore();
      item.forEach(
        (val) =>
          (document.getElementById("cell-" + val).style.backgroundColor =
            "#F58549")
      );
      unableToPlay = true;
      return -1;
    }
  }

  if (checkIfGamefieldIsFull()) {
    document.getElementById("outputResult").innerHTML = "Tie.";
    return 0;
  }

  return 0;
}

function increaseXScore() {
  scoreX += 1;
  document.getElementById("scoreLabel").innerHTML =
    "X " + scoreX + ":" + scoreO + " O";
}

function increaseOScore() {
  scoreO += 1;
  document.getElementById("scoreLabel").innerHTML =
    "X " + scoreX + ":" + scoreO + " O";
}

function checkIfGamefieldIsFull() {
  //let includesZero = true;

  let calculationResult = true;

  gameField.forEach((row) => {
    let includeResult = row.includes(0);
    if (includeResult) {
      calculationResult = false;
    }
  });

  return calculationResult;
}

function clickEvent(index) {
  let cellIndex = index;

  let arrayIndex = translateToMultiDimensionalIndex(cellIndex);
  let rowIndex2 = arrayIndex[0];
  let columnIndex2 = arrayIndex[1];

  if (gameField[rowIndex2][columnIndex2] == 0 && !unableToPlay) {
    columnIndex = cellIndex;
    gameField[rowIndex2][columnIndex2] = turn;

    switchTurn();
    drawBoard();
    checkWinner();
  }
}

function getCellValueByIndex(index) {
  let cellArray = translateToMultiDimensionalIndex(index);
  return gameField[cellArray[0]][cellArray[1]];
}

function translateToMultiDimensionalIndex(index) {
  let rowIndex = 0;
  let columnIndex = 0;
  let cellIndex = index;

  while (cellIndex >= 3) {
    rowIndex++;
    cellIndex -= 3;
  }

  columnIndex = cellIndex;

  return [Number(rowIndex), Number(columnIndex)];
}

function switchTurn() {
  if (turn == 1) {
    turn = -1;
  } else if (turn == -1) {
    turn = 1;
  }
}

function drawBoard() {
  for (cell of cells) {
    let renderedValue = "";
    let cellValue = getCellValueByIndex(cell.getAttribute("cell-index"));

    if (cellValue == 1) {
      renderedValue = "X";
    } else if (cellValue == -1) {
      renderedValue = "O";
    }

    cell.innerHTML = renderedValue;
  }
}