const grid = document.querySelector('.grid')
let cells
const board = Array.from({length: 81})
const usedNumbers = []

// fill usedNumbers with empty sets to keep track of numbers allready tried for a cell
function populateValues() {
  for (let i = 0; i < 81; i++) {
    usedNumbers[i] = new Set()
  }
}

// helper function returns the row in which the cell is (1-9)
function returnRow(index) {
  return ~~(index / 9) + 1
}

// helper function returns the column in which the cell is (1-9)
function returnCol(index) {
  return ~~(index % 9) + 1
}

// returns array with all peers in the same row
function checkRow(index) {
  const rowNum = returnRow(index)
  const row = board.slice((rowNum - 1) * 9, rowNum * 9)
  return row
}

// returns array with all peers in the same column
function checkCol(index) {
  const colNum = returnCol(index)
  const col = board.filter((e, i, a) => (~~(i % 9) + 1) == colNum ? true : false)
  return col
}

// returns array with all peers in the same block (3x3)
function checkBlock(index) {
  const firstCol = ~~((returnCol(index) - 1) / 3) * 3 + 1
  const firstRow = ~~((returnRow(index) - 1) / 3) * 3 + 1

  const block = []

  for (let i = 0; i < 3; i++) {
    const firstCell = board[(((firstRow - 1 + i) * 9) + (firstCol - 1))]
    const secondCell = board[(((firstRow - 1 + i) * 9) + (firstCol))]
    const thirdCell = board[(((firstRow - 1 + i) * 9) + (firstCol + 1))]
    block.push(firstCell)
    block.push(secondCell)
    block.push(thirdCell)
  }
  return block
}

// first we need to get all invalid numbers, i.e. numbers allready in use by peers
function getInvalidNumbers(cell) {
  const peers = new Set([...checkRow(cell), ...checkCol(cell), ...checkBlock(cell), ...Array.from(usedNumbers[cell])])
  peers.delete(undefined)
  return peers
}

// then we need have to 'invert' the invalid numbers array to get the valid numbers
function getValidNumbers(cell) {
  const invalidNumbers = getInvalidNumbers(cell)
  const validNumbers = []
  for (let i = 1; i <= 9; i++) {
    if (!invalidNumbers.has(i)) {
      validNumbers.push(i)
    }
  }
  return validNumbers
}

// main function to fill the board with numbers and to initialize backtracking if necessary
function fillBoard(boardArray) {
  let i = 0
  while (i < 81) {
    let validNumbers = getValidNumbers(i)
    let number = validNumbers[~~(Math.random() * validNumbers.length)]
    if (number) {
      board[i] = number
      usedNumbers[i].add(number)
      i++
    } else {
      board[i] = undefined
      usedNumbers[i].clear()
      i--
    }
  }
}

// render the board to the screen
function fillGrid(array, htmlElement) {
  array.forEach(e => {
    htmlElement.insertAdjacentHTML('beforeend', `<div class="cell _${e}">${e}</div>`)
  })
  cells = document.querySelectorAll('.cell')
  cells.forEach(cell => {
    cell.addEventListener('mouseover', highlightCells, {capture: false})
    cell.addEventListener('mouseleave', highlightCells, {capture: false})
  })
}

// highlights all cells with the same number in it
function highlightCells(e) {
  const hoveredCells = document.querySelectorAll(`.${e.target.classList[1]}`)
  hoveredCells.forEach(cell => cell.classList.toggle('highlight'))
}

populateValues()
fillBoard(board)
fillGrid(board, grid)