<div id='staging-content'>
  <main id='countdown-content'>
    <section id='countdown-options-content'>
      <header class='countdown-options-header'>
        <h1>Ready, Set, Go</h1>
        <h2>Staging Duration (seconds)</h2>
      </header>

      <section class='timer-options'>
        <button id='button-05-seconds' type='button' value='5'>5</button>
        <button id='button-10-seconds' type='button' value='10'>10</button>
        <button id='button-15-seconds' type='button' value='15'>15</button>
      </section>
    </section>

    <section id='timer-display-content'>
      <h1 id='timer-display'></h1>
    </section>
  </main>
  <footer id='start-over'>
    <button class='start-over' type='button'>Start Over</button>
  </footer>
</div>

/* defining the stage colour as a variable */
:root {
  --stage-bgColor: black;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  font-family: arial, sans-serif;
  margin: 0;
}

#staging-content {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2em;
  background-color: var(--stage-bgColor); /* set with css variable */
}

#countdown-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: white;
}

.timer-options {
  display: flex;
  gap: 1em;
  height: 5em;
}

#timer-display-content {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

#timer-display {
  font-size: 16em;
  margin: 0;
  display: none;
}

/* toggle the hidden class to show or hide countdown */
#timer-display.show {
  display: block;
}

.hidden {
  display: none;
}

#staging-content button {
  display: block;
  border-radius: 5px;
  font-weight: bold;
  font-size: 2em;
  color: white;
  width: 100%;
  background-color: #666;
  transition: color .3s linear;
  cursor: pointer;
}

#staging-content button:hover {
  background-color: #888;
}

#start-over button {
  font-size: 3em;
}

window.addEventListener('DOMContentLoaded', () => {
  const doc = window.document

  function getRandomIntInclusive (min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }

  // Stage callbacks
  function stagingCountdown (count) {
    countdown({
      count,
      bgColor: 'black',
      isVisible: true,
      callback: yellowCountdown
    })
  }

  function yellowCountdown () {
    countdown({
      count: getRandomIntInclusive(1, 6),
      bgColor: 'yellow',
      isVisible: false,
      callback: greenCountdown
    })
  }

  function greenCountdown () {
    countdown({
      count: 2,
      bgColor: '#3ddc32',
      isVisible: false,
      callback: resetAll
    })
  }

  function setLight (bgColor) {
    const root = doc.documentElement
    root.style.setProperty('--stage-bgColor', bgColor)
  }

  const countdownOptions = doc.getElementById('countdown-options-content')
  const timerCountdown = doc.getElementById('timer-display')
  let timer = null

  function startCountingFrom (event) {
    countdownOptions.classList.add('hidden')
    stagingCountdown(event.target.value)
  }

  function countdown ({ count, bgColor, isVisible, callback }) {
    timerCountdown.classList.toggle('show', isVisible)
    setLight(bgColor)

    function updateCounter (count) {
      timerCountdown.textContent = count

      timer = setTimeout(() => {
        if (count > 1) {
          updateCounter(count - 1)
        } else {
          callback()
        }
      }, 1000)
    }

    updateCounter(count)
  }

  function resetAll () {
    timerCountdown.classList.remove('show')
    countdownOptions.classList.remove('hidden')

    clearTimeout(timer)
    setLight('black')
  }

  // EventListeners
  const timerButtons = doc.querySelectorAll('.timer-options button')

  timerButtons.forEach(
    (button) => button.addEventListener('click', startCountingFrom)
  )

  const resetButton = doc.querySelector('#start-over button')

  resetButton.addEventListener('click', resetAll)
})