<!-- component template -->
<template>
  <div data-name="game5_phase34" class="page">

    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">
          <span class="game5-title-span">{{ $root.appdict.game5_title_phase3 }}</span>
        </div>
        <div class="right"><i class="fas fa-wifi" style="margin-right: 0.5rem"></i> http://{{publicurl}}</div>
      </div>
    </div>

    <div class="page-content">

      <div class="block-title">
        <span class="game5-title-span">{{ $root.appdict.game5_title_phase3 }}</span>
      </div>
      <div class="block">

        <div class="row">
          <div class="col-40">
            <span id="game5-info-span">{{ $root.appdict.game5_info_phase3 }}</span>
          </div>
          <div class="col-60">
            {{ screenshot }}
          </div>

        </div>

      </div>

      <div id="phase3-block" class="block block-strong">
        <div class="row">
          <div class="col-55">
            <span id="timer-output"></span>
          </div>
          <div class="col-30">
            <button @click="toggleTimer" id="toggleTimer-button"
              class="button button-large button-outline">{{ $root.appdict.label_pausetimer }}</button>
          </div>
          <div class="col-15">
            <button @click="skipToPhase4" class="button button-large button-outline">{{ $root.appdict.btn_skip }}</button>
          </div>
        </div>
      </div>

      <div id="phase4-block" style="display: none" class="block block-strong">
        <div class="row">
          <div class="col-55">
            {{ $root.appdict.game5_info_goto5 }}
          </div>

          <div class="col-45">
            <button @click="skipToNext" class="button button-large button-outline">{{ $root.appdict.btn_continue }}</button>
          </div>
        </div>
      </div>

      <div id="loader-block" class="block block-strong align-items-stretch text-align-center">
        <div class="row">
          <div class="col-100">
            <div class="preloader" style="width: 44px; height: 44px"></div>
            <p>{{ $root.appdict.game5_info_waiting }}</p>
          </div>
        </div>
      </div>

      <div id="questionroot">
      </div>

    </div>

  </div>
</template>


<style>

</style>


<script>
  // script must return component object
  return {
    data: function () {
      return {
        publicurl: ui.publicUrl,
        screenshot: ui.tmp.screenShot

      }
    },
    methods: {
      toggleTimer: function () {
        ui.timerPause = !ui.timerPause
        if (ui.timerPause) {
          $$("#toggleTimer-button").html(`<i class="fas fa-play-circle"></i> ${framework.data.appdict.label_resumetimer}`)
        } else {
          $$("#toggleTimer-button").html(`<i class="fas fa-pause-circle"></i> ${framework.data.appdict.label_pausetimer}`)
        }
      },
      skipToPhase4: function () {
        ui.fn.triggerPhase4()
      },
      skipToNext: function () {
        ui.fn.nextPhase()
      },
    },
    on: {
      pageBeforeIn: function () {


      },
      pageAfterIn: function () {

        ui.timer = 200
        ui.timerPause = false
        ui.questionQueue = 0

        ui.lastUpdate = Date.now()
        ui.timer += 0.9

        function updatePage() {

          if (ui.questionQueue === 0) {
            ipcRenderer.send('ipcF2M_getUncheckedQuestions')
            console.log("Checking for new questions")

            $$("#loader-block").show()


          }

          let timerVal = ui.fn.timerUpdate()
          $$("#timer-output").html(`${framework.data.appdict.label_phasetimer} <strong>${timerVal}</strong>`)
          if (timerVal === 0 && !ui.timerPause) ui.fn.triggerPhase4()
        }

        updatePage()
        ipcRenderer.send('ipcF2M_setGameState', 'Phase3')


        ui.update = setInterval(updatePage, 500)
        ui.shotUpdate = setInterval(ui.fn.updateScreenShot, 5000)
      },
    }
  }
</script>