<div id="main"></div>

:root{
  --main-purple: #001d3d;
}

.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 500px;
  max-width: 500px;
  margin: auto;
  margin-top: 80px;
  background-color: ghostwhite;
}

html, body {
  height: calc(100% - 70px);
  font-family: 'Cutive Mono', monospace;
}
body {
  background: #000814
}

.big-block{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #666666;
}

[class^="block-"] {
  display: grid;
  place-content: center;
  border: 1px solid #9b5de5;
  transition: all .3s ease-in-out;
  user-select: none;
  position: relative;
}

.selected {
  background-color: #00bbf9;
  color: #000000 !important;
}

.selected > .notes {
  color: #000000 !important;
}

[class^="block-"]:not(.empty) {
  background-color: var(--main-purple);
  color: #FFFFFF;
}

.empty {
  color: #00a6ff;;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  padding: 14px 10px;
  background-color: var(--main-purple);
  color: #fff;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: .8fr 1fr;
}

.header .options > div {
  display: grid;
  grid-auto-flow: column;
  column-gap: .5rem;
}

.header > h3 {
  margin: 0;
  place-self: center start;
  padding-left: 10px;
}

.note-selected {
  background-color: #fee440;
  color: #000 !important;
}

.notes {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  display: grid;
  place-content: center;
  color: #666666;
  font-size: 14px;
}

.mobile-controls {
  display: none;
}

.options {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  place-self: center end;
  column-gap: 10px;
}

.options > * {
  cursor: pointer;
  transition: transform .2s ease-in-out;
  position: relative;
}

.options > *::after {
  content: '';
  position: absolute;
  height: .2rem;
  width: 100%;
  bottom: -5px;
  background-color: #ffd60a;
  transform-origin: right;
  transition: transform .2s ease-in-out;
  transform: scaleX(0)
}

.options > *:hover {
  transform: scale(1.06);
}

.options > *:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

.hidden {
  display: none !important;
}

@media only screen and (min-device-width: 300px) 
  and (max-device-width: 800px) 
  {
    .main-grid {
      height: calc(100vh - 180px);
    }
    .mobile-controls {
      display: grid;
      grid-auto-flow: column;
      margin: 10px 5px;
      padding: 5px;
      place-items: center;
      border: 1px solid #d3d3d3;
      background-color: ghostwhite;
    }
    [class^="slector-"] {
      padding-top: 5px;
      width: 100%;
      height: 100%;
      text-align: center;
      border: 1px solid #d3d3d3;
      transition: all .3s ease-in-out;
    }
    [class^="slector-"]:hover {
      background-color: var(--main-purple);
      color: #ffffff;
    }
  }

.hint-n {
  position: absolute;
  bottom: -1.5rem;
  left: calc(50% - 0.6rem);
  width: 1.2rem;
  height: 1.2rem;
  background-color: #ffd60a;
  border-radius: 50%;
  display: grid;
  place-content: center;
}

/*-------METAFLUX STORAGE-------*/
// empty sudoku array
const _empty = new Array(
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0
);
window.storage = new Store(
  {
    Main: {
      sudoku: _empty,
      userSolve: _empty,
      hintN: 5
    }
  },
  {
    SUDOKU_SOLUTION: (action, state) => {
      const { sudoku, positions } = action;
      state.Main.sudoku = sudoku;
      state.Main.positions = positions;
      return { newState: state }
    },
    SET_VALUE: (action, state) => {
      const { pos, value } = action;
      state.Main.userSolve[pos] = value;
      if(isSolvedSudoku(state.Main.userSolve)) alert('Wiiii you won');
      return { newState: state }
    },
    LOAD_SAVED_GAME: (action, state) => {
      const { savedGame } = action;
      state.Main = savedGame;
      return { newState: state }
    },
    USE_HINT: (action, state) => {
      state.Main.hintN = state.Main.hintN - 1;
      return { newState: state }
    }
  }
)

/*
* On Load start game or load in local storage
*/
document.addEventListener('DOMContentLoaded', () => {
  const main = document.querySelector('#main')
  main.appendChild(headerComponent)
  main.appendChild(mainContainer);
  main.appendChild(mobileControlls);
  keyboardListener();
  let savedGame = localStorage.getItem('saved_sudoku');
  if(!savedGame) {
    newSudoku();
  } else {
    savedGame = JSON.parse(savedGame);
    load(savedGame);
  }
});
/*
* UI ELEMENTS
*/
/*
* Main container
*/
const mainContainer = Div({ className: 'main-grid' })
/*
* header component
*/
const headerComponent = 
      Div({ className: 'header' },[
        H3(false, 'Metaflux example'),
        Div({ className: 'options' },[
          Div({onclick: () => { save() }},[
            Span({}, 'Save'),
            I({className: 'fas fa-save'})
          ]),
          Div({onclick: () => { hint() }},[
            Span({}, 'Hint'),
            I({className: 'fas fa-question'}),
            Div({className: 'hint-n'},5)
            .onStoreEvent('USE_HINT', (state, that) => {
              that.innerHTML = state.Main.hintN;
            })
          ]),
          Div({onclick: () => { reroll() }},[
            Span({}, 'New Game'),
            I({className: 'fas fa-sync-alt'})
          ]),
        ])]
      );
/*
 * get solved blocks
*/
function getBlock(n, i, j) {
  return Div({ className: `block-${i}-${j}`},
       Div({ className:'solution' }, n)
  );
}
/*
* get empty blocks
*/
function getEmptyBlock(i,j, n) {
  return Div({ className: `block-${i}-${j} empty`, onclick: function () {
    // on click select block
    selectLine(this);
  }, oncontextmenu: function (ev) {
    // on right click select note
    ev.preventDefault();
    selectNoteLine(this);
  }},[
    Div({ className: 'solution' }),
    Div({ className: 'notes' })
 ]);
}
/*
* mobile controlls
*/
const mobileControlls = Div({ className: 'mobile-controls' }, function () {
  const arr = [];
  for(let i=1; i < 10; i++) {
    arr.push(Div({ className: `slector-${i}`, onclick: () => {
      setValue(i)
    } }, i));
  }
  arr.push(Div({ className: 'slector-0', onclick: () => {
      setValue(0)
  }}, I({ className: 'fas fa-trash' })));
  return arr;
});


/*---------GAME LOGIC------------------------ */
/*
* IN THIS SECTION WE WILL GENERATE A NEW SUDOKU
*/
function newSudoku() {
  mainContainer.innerHTML = "";
  solve(_empty);
}
/*
* load game from localstorage
*/
function load(savedGame) {
  document.querySelector('.main-grid').innerHTML = "";
  showSudoku(savedGame.sudoku, savedGame.positions);
  loadedGame(savedGame.userSolve);
  window.storage.dispatch({ type: 'LOAD_SAVED_GAME', savedGame})
}

/**
 * load game from array
 * @param {Array} userSolve block solved by user
 */
function loadedGame(userSolve) {
  for(let i=0; i < 9; i++) {
    for(let j=0; j < 9; j++) {
      const block = document.querySelector(`.block-${i}-${j}`)
      const key = userSolve[i*9 + j];
      if (key !== 0){
        window.storage.dispatch({ type: 'SET_VALUE', pos: i*9+j, value: userSolve[i*9+j]})
        block.querySelector('.solution').innerHTML = key;
      }
      
    }
  }
}
/*
* Select a block as a note and deselect old.
*/
function selectNoteLine(block) {
  const selectedBefore = document.querySelectorAll('.selected');
  const selectedNoteBefore = document.querySelectorAll('.note-selected');
  selectedNoteBefore.forEach(old => { old.classList.remove('note-selected') });
  selectedBefore.forEach(old => { old.classList.remove('selected') });
  block.classList.add('note-selected')
}

/**
 * select a block and deselect the old one;
 * @param {HTMLElement} block 
 */
function selectLine(block) {
  const selectedBefore = document.querySelectorAll('.selected');
  const selectedNoteBefore = document.querySelectorAll('.note-selected');
  selectedNoteBefore.forEach(old => { old.classList.remove('note-selected') });
  selectedBefore.forEach(old => { old.classList.remove('selected') });
  block.classList.add('selected')
}
/**
 * Listen to the keyboard, if a number is press and some block is selected dispatch value
 */
function keyboardListener() {
  document.addEventListener('keydown', (ev) => {
    const key = parseInt(ev.key);
    if(!isNaN(key)) {
      setValue(key);
    }
  })
}
/**
 * Set value to the selected or note-selecte block
 * @param {Number} key Integer from 0 to 9
 */
function setValue(key) {
  const selected = document.querySelector('.selected');
  const noteSelected = document.querySelector('.note-selected');
  if (selected !== null) {
    window.storage.dispatch({
      type: 'SET_VALUE',
      pos: getLinearPosition(selected),
      value: key
    });
    selected.querySelector('.solution').innerHTML = key !== 0 ? key : "";
    selected.querySelector('.notes').innerHTML = '';
  } else if(noteSelected !== null) {
    window.storage.dispatch({
      type: 'SET_VALUE',
      pos: getLinearPosition(noteSelected),
      value: 0
    });
    noteSelected.querySelector('.solution').innerHTML = '';
    noteSelected.querySelector('.notes').innerHTML += `|${key}|`;
    if(key === 0) noteSelected.querySelector('.notes').innerHTML = '';
  }
}
/**
 * Given a position y and x convert it to a linear postion 
 * (y*9) + x
 * @param {HTMLElement} block 
 */
function getLinearPosition(block) {
  let fc = block.classList[0];
  let pos = fc.slice(6);
  pos = pos.split('-');
  return parseInt(pos[0]) * 9 + parseInt(pos[1]);
}


function save() {
  const main = window.storage.getState().Main;
  localStorage.setItem('saved_sudoku', JSON.stringify(main));
}
/*
* display hint in selected block
*/
function hint() {
  const { hintN, sudoku } = window.storage.getState().Main;
  const selected = document.querySelector('.selected');
  if(selected !== null) {
    if (hintN !== 0) {
      const linear = getLinearPosition(selected);
      selected.querySelector('.solution').innerHTML = sudoku[linear];
      window.storage.dispatch({ type: 'SET_VALUE', pos: linear, value: sudoku[linear] });
      window.storage.dispatch({ type: 'USE_HINT' });
    }
  } else {
    alert(`You have to select a block for a hint, you have: ${hintN} hints left`);
  }
}
/**
 * Reroll, the game
 */
function reroll() {
  newSudoku();
}

// given a sudoku, solves it
function solve(sudoku) {
  var saved = new Array();
  var savedSudoku = new Array();
  var i=0;
  var nextMove;
  var whatToTry;
  var attempt;
  while (!isSolvedSudoku(sudoku)) {
    i++;
    nextMove = scanSudokuForUnique(sudoku);
    if (nextMove == false) {
      nextMove = saved.pop();
      sudoku = savedSudoku.pop();
    }
    whatToTry = nextRandom(nextMove);
    attempt = determineRandomPossibleValue(nextMove,whatToTry);
    if (nextMove[whatToTry].length>1) {
      nextMove[whatToTry] = removeAttempt(nextMove[whatToTry],attempt);
      saved.push(nextMove.slice());
      savedSudoku.push(sudoku.slice());
    }
    sudoku[whatToTry] = attempt;
  }
  const pos = getRandomPositions();
  showSudoku(sudoku,pos);
}


/*
* Display sudoku
*/
function showSudoku(sudoku, pos) {
  let temp = Div();
  window.storage.dispatch({ type: 'SUDOKU_SOLUTION', sudoku, positions: pos });
  for(let x=0; x < 9; x++) {
    for(let y=0; y < 9; y++) {
      if(pos.match(new RegExp(`\/${x}-${y}\/`)) !== null) {
        temp.appendChild(getBlock(sudoku[x*9+y], x, y));
        window.storage.dispatch({
          type: 'SET_VALUE', pos: x*9+y, value: sudoku[x*9+y]
        });
      } else {
        temp.appendChild(getEmptyBlock(x,y));
      }
    }
  }
  // create the Big blocks(3 x 3)
  for(let i=0; i < 9; i = i + 3) {
    for(let j=0; j < 9; j = j + 3 ) {
      const BB =  rec(j, i, temp);
      mainContainer.appendChild(BB);
    }
  }
  console.log('Finish');
}
/*
* Create 3 X 3 rectangles 
*/
function rec(n, x, el) {
  const BB = Div({className: 'big-block'});
  for(let i=x; i < x + 3; i++) {
    for(let j=n; j < n +3; j++) {
      BB.appendChild(el.querySelector(`.block-${i}-${j}`))
    }
  }
  return BB;
}

/**
 * create 30 random positions non reaping to display initial values
 */
function getRandomPositions() {
  let longStr = '';
  for(let i = 0; i < 30; i++) {
    const x = getRandomInt(); const y = getRandomInt();
    if(longStr.match(new RegExp(`\/${y}-${x}\/`)) !== null) {
      i = i - 1;
    } else {
      longStr += `/${y}-${x}/`
    }
  }
  return longStr;
}

// given a sudoku cell, returns the row
function returnRow(cell) {
  return Math.floor(cell / 9);
}

// given a sudoku cell, returns the column
function returnCol(cell) {
  return cell % 9;
}

// given a sudoku cell, returns the 3x3 block
function returnBlock(cell) {
  return Math.floor(returnRow(cell) / 3) * 3 + Math.floor(returnCol(cell) / 3);
}

// given a number, a row and a sudoku, returns true if the number can be placed in the row
function isPossibleRow(number,row,sudoku) {
  for (var i=0; i<=8; i++) {
    if (sudoku[row*9+i] == number) {
      return false;
    }
  }
  return true;
}

// given a number, a column and a sudoku, returns true if the number can be placed in the column
function isPossibleCol(number,col,sudoku) {
  for (var i=0; i<=8; i++) {
    if (sudoku[col+9*i] == number) {
      return false;
    }
  }
  return true;
}

// given a number, a 3x3 block and a sudoku, returns true if the number can be placed in the block
function isPossibleBlock(number,block,sudoku) {
  for (var i=0; i<=8; i++) {
    if (sudoku[Math.floor(block/3)*27+i%3+9*Math.floor(i/3)+3*(block%3)] == number) {
      return false;
    }
  }
  return true;
}

// given a cell, a number and a sudoku, returns true if the number can be placed in the cell
function isPossibleNumber(cell,number,sudoku) {
  var row = returnRow(cell);
  var col = returnCol(cell);
  var block = returnBlock(cell);
  return isPossibleRow(number,row,sudoku) && isPossibleCol(number,col,sudoku) && isPossibleBlock(number,block,sudoku);
}

// given a row and a sudoku, returns true if it's a legal row
function isCorrectRow(row,sudoku) {
  var rightSequence = new Array(1,2,3,4,5,6,7,8,9);
  var rowTemp= new Array();
  for (var i=0; i<=8; i++) {
    rowTemp[i] = sudoku[row*9+i];
  }
  rowTemp.sort();
  return rowTemp.join() == rightSequence.join();
}

// given a column and a sudoku, returns true if it's a legal column
function isCorrectCol(col,sudoku) {
  var rightSequence = new Array(1,2,3,4,5,6,7,8,9);
  var colTemp= new Array();
  for (var i=0; i<=8; i++) {
    colTemp[i] = sudoku[col+i*9];
  }
  colTemp.sort();
  return colTemp.join() == rightSequence.join();
}

// given a 3x3 block and a sudoku, returns true if it's a legal block 
function isCorrectBlock(block,sudoku) {
  var rightSequence = new Array(1,2,3,4,5,6,7,8,9);
  var blockTemp= new Array();
  for (var i=0; i<=8; i++) {
    blockTemp[i] = sudoku[Math.floor(block/3)*27+i%3+9*Math.floor(i/3)+3*(block%3)];
  }
  blockTemp.sort();
  return blockTemp.join() == rightSequence.join();
}

// given a sudoku, returns true if the sudoku is solved
function isSolvedSudoku(sudoku) {
  for (var i=0; i<=8; i++) {
    if (!isCorrectBlock(i,sudoku) || !isCorrectRow(i,sudoku) || !isCorrectCol(i,sudoku)) {
      return false;
    }
  }
  return true;
}

// given a cell and a sudoku, returns an array with all possible values we can write in the cell
function determinePossibleValues(cell,sudoku) {
  var possible = new Array();
  for (var i=1; i<=9; i++) {
    if (isPossibleNumber(cell,i,sudoku)) {
      possible.unshift(i);
    }
  }
  return possible;
}

// given an array of possible values assignable to a cell, returns a random value picked from the array
function determineRandomPossibleValue(possible,cell) {
  var randomPicked = Math.floor(Math.random() * possible[cell].length);
  return possible[cell][randomPicked];
}

// given a sudoku, returns a two dimension array with all possible values 
function scanSudokuForUnique(sudoku) {
  var possible = new Array();
  for (var i=0; i<=80; i++) {
    if (sudoku[i] == 0) {
      possible[i] = new Array();
      possible[i] = determinePossibleValues(i,sudoku);
      if (possible[i].length==0) {
        return false;
      }
    }
  }
  return possible;
}

// given an array and a number, removes the number from the array
function removeAttempt(attemptArray,number) {
  var newArray = new Array();
  for (var i=0; i<attemptArray.length; i++) {
    if (attemptArray[i] != number) {
      newArray.unshift(attemptArray[i]);
    }
  }
  return newArray;
}

// given a two dimension array of possible values, returns the index of a cell where there are the less possible numbers to choose from
function nextRandom(possible) {
  var max = 9;
  var minChoices = 0;
  for (var i=0; i<=80; i++) {
    if (possible[i]!=undefined) {
      if ((possible[i].length<=max) && (possible[i].length>0)) {
        max = possible[i].length;
        minChoices = i;
      }
    }
  }
  return minChoices;
}

/*------------UTILS-----------------*/
function getRandomInt() {
  return Math.floor(Math.random() * (8 - 0)) + 0;
}

function I(props, content = '') {
   return HTMLElementCreator('i',Object.assign({}, props, { content }));
}