var boardContainer = document.getElementById("boardContainer");



var board;



var boardMaker = {
  createNewBoardObject: function(){
    var board = {
        section: {},
        column: {},
        row: {},
        space: {},
    };
    
    
    var section = 1;
    
    for (var section_row = 1; section_row < 4; section_row++){
    
      var row_offset = (section_row - 1) * 3;
      for (var section_column = 1; section_column < 4; section_column++){
        
        var column_offset = (section_column - 1) * 3;
        
        for (var space_row = 1; space_row < 4; space_row++){
          for (var space_column = 1; space_column < 4; space_column++){
            
            var _column = space_column + column_offset;
            var _row = space_row + row_offset;
            var _id = "s" + section.toString() + _row.toString() + _column.toString();
            
           
            var space = {
              section: section,
              column: _column,
              row: _row,
              id: _id,
              number: null,
              availableNumbers: [1,2,3,4,5,6,7,8,9],
              blacklist: [],
            };
            
         
            board.space[_id] = space;
            
          
            if (!board.section[space.section]){
              board.section[space.section] = [];
            }
            if (!board.column[space.column]){
              board.column[space.column] = [];
            }
            if (!board.row[space.row]){
              board.row[space.row] = [];
            }
            
           
            board.section[space.section].push(space.id);
            board.column[space.column].push(space.id);
            board.row[space.row].push(space.id);
            
          }
        }
        section += 1;
      }
    }
    
    return board;
  },
  
  makeSectionDiv: function(){
    var sectionDiv = document.createElement("div");
    sectionDiv.classList.add("section", "grid_3x3");
    return sectionDiv;
  },
  makeSpaceDiv: function(spaceID){
    var spaceDiv = document.createElement("div");
    spaceDiv.id = spaceID;
    spaceDiv.classList.add("space");
    return spaceDiv;
  },
  displayBoard: function(boardContainerElement, boardData){
    var boardMaker = this;
    var board = document.createElement("div");
    board.id = "board";
    board.classList.add("grid_3x3");
    
    for (var i = 1; i < 10; i++){
      
      var sectionDIV = boardMaker.makeSectionDiv();
      
      boardData.section[i].forEach(function(spaceID){
        sectionDIV.appendChild(boardMaker.makeSpaceDiv(spaceID));
      });
      
      board.appendChild(sectionDIV);
    }
    
    boardContainerElement.innerHTML = "";
    boardContainerElement.appendChild(board);
  },
  clearBoard: function(boardContainerElement){
    board = this.createNewBoardObject();
    this.displayBoard(boardContainerElement, board);
  },
}



var sudoku = {
  markSpace: function(boardObj, spaceID, num){
    if (/[1-9]/.test(num) && sudoku.numberIsAvailable(boardObj, spaceID, num)) {
      boardObj.space[spaceID].number = Number(num);
      sudoku.updateAvailableNumbersForAllSpaces(boardObj);
    }
    if (num === "Backspace") {
      boardObj.space[spaceID].number = null;
      sudoku.updateAvailableNumbersForAllSpaces(boardObj);
    }
  },
  
  numberIsAvailable: function(boardObj, spaceID, num){
    
    var availableNumbersArr = boardObj.space[spaceID].availableNumbers;
    
    num = Number(num);
    
   
    
    for (var i = 0; i < availableNumbersArr.length; i++){
      if (availableNumbersArr[i] == num){
        return true
      }
    }
    
    return false
    
    
    
    
    var numIsAvailable = availableNumbersArr.includes(num);
    
    if (numIsAvailable){
      return true;
    } else {
      return false;
    }
    
  
    
    return boardObj.space[spaceID].availableNumbers.includes(num);
  },
  
  numberIsAvailableInSpaceArray: function(boardObj, spaceArray, num){    
    return spaceArray.every(function(spaceID){
      return boardObj.space[spaceID].number != num;
    });
  },
  updateAvailableNumbersForSpace: function(boardObj, spaceID){
    
    var sectionNum = boardObj.space[spaceID].section;
    var rowNum = boardObj.space[spaceID].row;
    var columnNum = boardObj.space[spaceID].column;
    
    var sectionArr = boardObj.section[sectionNum];
    var rowArr = boardObj.row[rowNum];
    var columnArr = boardObj.column[columnNum];
    
    var allNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    
    var newAvailableNumbers = allNumbers.filter(function(num){
      var availableInSection = sudoku.numberIsAvailableInSpaceArray(boardObj, sectionArr, num);
      var availableInRow = sudoku.numberIsAvailableInSpaceArray(boardObj, rowArr, num);
      var availableInColumn = sudoku.numberIsAvailableInSpaceArray(boardObj, columnArr, num);
      
      return (availableInSection && availableInRow && availableInColumn);
    });
    
    boardObj.space[spaceID].availableNumbers = newAvailableNumbers;
    
  },
  updateAvailableNumbersForAllSpaces: function(boardObj){
    
    var spaces = boardObj.space;
    
    for (var space in spaces){
      sudoku.updateAvailableNumbersForSpace(boardObj, space);
    }
    
  },
}

board = boardMaker.createNewBoardObject();
boardMaker.displayBoard(boardContainer, board);



function updateUI(boardObj){
  var spaces = Array.from(document.getElementsByClassName("space"));
  spaces.forEach(function(space){
      space.innerHTML = boardObj.space[space.id].number;
  });
}

function unlockBoard(elementArray){
  elementArray.forEach(function(element){
    element.setAttribute("contenteditable", true);
    element.style.backgroundColor = "#ddd";
  });
};


unlockBoard(Array.from(document.getElementsByClassName("space")));




document.addEventListener("keydown", function(e){
  e.preventDefault();
  sudoku.markSpace(board, e.target.id, e.key);
  updateUI(board);
});