let numbers = document.querySelector('.o__flip-numbers > .flip-numbers__numbers')
let highScore = 0
let score = 0
let roll = 0
let rollCopy = 0
let turnValue = 1

const resetButtons = () => {
 let endGameButton = document.getElementById('end-game')
 let rollButton = document.getElementById('roll')
 
 rollButton.classList.toggle('inactive')
 endGameButton.classList.toggle('inactive')
}

// resetAll to true for a hard reset
const resetFlip = (resetAll=false) => {
 let cards = [...document.getElementsByClassName('m__flip-number')]

 cards.forEach(card => {
  resetAll ? card.className = 'm__flip-number' : card.classList.remove('active')
 })
}

const flip = (num=0) => {
 resetFlip()
 
 for (let x=1; x<10; x++) {
  let card = document.getElementById(x)
  let value = Math.abs(rollCopy - num)

  if (x > value) continue
  else card.classList.add('active')
 }
}

const handleClick = (e) => {
 resetFlip()
 
 let card = e.target
 let num = parseInt(e.target.id)
 let endTurnButton = document.getElementById('end-turn')

 if (card.classList.contains('active--selected')) {
   card.classList.remove('active--selected')
   rollCopy += num
   flip()
 } else {
   card.classList.add('active--selected')
   flip(num)
   rollCopy -= num
 }

 // Show End Turn button if card selections are good
 rollCopy === 0 ? 
  endTurnButton.classList.remove('inactive') :
  endTurnButton.classList.add('inactive')
}

const endTurn = (button) => {
 let selectedCards = [...document.getElementsByClassName('m__flip-number active--selected')]

 selectedCards.forEach(card => card.className = ('m__flip-number flipped'))
 score += roll
 
 if (score == 45) return endGame()
 
 button.classList.add('inactive')
 button.innerHTML = `End Turn ${turnValue}`
 resetButtons()
}

const endGame = () => {
 let endTurnButton = document.getElementById('end-turn') 
 let scoreContainer = document.querySelector('.dice-container__score > p')

 endTurnButton.innerHTML = `End Turn 1`
 
 if (score == 45) scoreContainer.innerHTML = 'You win the game! Congratulations!'
 else if (score > highScore) scoreContainer.innerHTML = `Your score is ${score}. You beat the high score of ${highScore}. Nice job!`
 else scoreContainer.innerHTML = `Your score is ${score}, which is less than ${highScore}. Still a good try though! Try again!`
 
 turnValue = 1
 highScore = Math.max(highScore, score)
 score = 0
 
 resetButtons()
 resetFlip(true)
}

// Game
const rollTurn = () => {
 let diceContainer = document.getElementById('dice-container')
 let firstRoll = Math.floor(Math.random() * 6) + 1
 let secondRoll = Math.floor(Math.random() * 6) + 1
 
 let firstDice = document.querySelector(`.dice__${firstRoll}`)
 let secondDice = document.querySelector(`.dice__${secondRoll}`)
 
 diceContainer.innerHTML = ''
 diceContainer.append(firstDice.cloneNode(true))
 diceContainer.append(secondDice.cloneNode(true))
 
 roll= firstRoll + secondRoll
 rollCopy = roll
 turnValue += 1
 
 resetButtons()
 flip()
}

// Initialization
const setup = () => {
 for (let x=1; x<10; x++) {
  let num = document.createElement('div')
  num.addEventListener('click', handleClick)
  num.setAttribute('class', 'm__flip-number')
  num.setAttribute('id', x)
  num.innerHTML = x

  numbers.appendChild(num)
 }
}
setup()