let initGameBoard = function(){

  let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","x"]
  return _.chunk( _.shuffle(arr),4 )
}

function printGameBoard(board){
  let boardHtml = board.map((rowVals)=> rowVals.map( (colVal)=> {
      return `<div id="${colVal}">${colVal}</div>`
  }).join('')).join('')

  document.querySelector('main').innerHTML = boardHtml
}

function setXYCoords( xCoord, yCoord, val, board){
  board[xCoord][yCoord] = val
  return board
}

function findXYCoords(pieceToFind, board){
  let pos = {
    x: null,
    y: null
  }

  board.forEach(function(boardRowVals, rowIndex){
    boardRowVals.forEach(function(colVal , colIndex){
      if( colVal === pieceToFind ){
         pos.y = rowIndex
         pos.x = colIndex
      }
    })
  })

  return pos
}

let GAMEBOARD = initGameBoard()


printGameBoard(GAMEBOARD)

$('main').on('click div', function(evt){
  let emptyPos = findXYCoords("x", GAMEBOARD)
  let clickedPos = findXYCoords(evt.target.id, GAMEBOARD)
  console.log(emptyPos)
  console.log(clickedPos)
  let isMoveable = false

  if( clickedPos.x + 1 === emptyPos.x &&
      clickedPos.y === emptyPos.y
    ){
    isMoveable = true
    console.log('clicked-piece-MOVES-RIGHT')
  }

  if( clickedPos.x - 1 === emptyPos.x &&
      clickedPos.y === emptyPos.y
    ){
    isMoveable = true
    console.log('clicked-piece-MOVES-LEFT')
  }

  if( clickedPos.x === emptyPos.x  &&
      clickedPos.y - 1 === emptyPos.y
    ){
    isMoveable = true
    console.log('clicked-piece-MOVES-UP')
  }

  if( clickedPos.x  === emptyPos.x &&
      clickedPos.y + 1 === emptyPos.y
    ){
    isMoveable = true
    console.log('clicked-piece-MOVES-DOWN')
  }

  console.log(evt.target.id)

  if(isMoveable === true){
    GAMEBOARD = setXYCoords(clickedPos.y, clickedPos.x, 'x', GAMEBOARD)
    GAMEBOARD = setXYCoords(emptyPos.y, emptyPos.x, evt.target.id , GAMEBOARD)
    printGameBoard(GAMEBOARD)
  }


})