let positions = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const player = "X";
const computer = "O";
let count = 1;
let currentTurn = player;
let winner;
//Dom Elements
let grid = document.createElement("div");
grid.style.width = "200px";
grid.style.display = "flex";
grid.style.flexWrap = "wrap";
grid.style.justifyContent = "center";
grid.style.alignItem = "center";
document.body.appendChild(grid);

setupTicTacToe();

// switch turns
function switchTurn() {
  if (count % 2 == 0) {
    currentTurn = computer;
  } else if (count % 2 != 0) {
    currentTurn = player;
  }
  return currentTurn;
}

// output a clickable grid in a 3 x 3 grid
function setupTicTacToe() {
  for (let i = 0; i < positions.length; i++) {
    let position = document.createElement("p");
    position.setAttribute("id", `position${i + 1}`);
    position.innerHTML = i + 1;
    // apply style to resemble a grid
    position.style.display = "flex";
    position.style.justifyContent = "center";
    position.style.alignItem = "center";
    position.style.cursor = "pointer";
    //position.style.border = "black solid 1px"
    position.style.height = "32px";
    position.style.flex = "0 32%";
    grid.appendChild(position);
    // TRYING TO MAKE THE GAME WORK WITH ONCLICK FUNCTIONS
    /* UPDATE make the input function clickable */
    position.onclick = function () {
      let clicked = i + 1;
      if (clicked == positions[i]) {
        count++;
        let clickedPosition = document.getElementById(`position${clicked}`);
        clickedPosition.innerText = currentTurn;
        positions.splice(i, 1, currentTurn);
        switchTurn();
      }

      checkForWin();
      console.log(clicked, positions, currentTurn);
    }
  }
}


// Check for win
function checkForWin() {
  if (currentTurn === 'X') {
    console.log('current player is human');
  } else {
    console.log('current player is computer');
  }
  if (positions[0] === player) {
    console.log("hi");
  }
}

// End Game
function endGame() {
  let winnerOutput = document.createElement("p");
  winnerOutput.innerText = `${winner.toUpperCase()} wins`;
  document.body.appendChild(winnerOutput);
  // document.body.removeChild(inputLabel);
  // document.body.removeChild(playerInput);
  // document.body.removeChild(submitInput);
}