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

    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">{{ $root.appdict.game1_title }}</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">{{ $root.appdict.game1_title }}</div>
      <div class="block">
        {{ $root.appdict.game1_info }}
      </div>

      <div class="data-table card">
        <table>
          <thead>
            <tr>
              <th class="label-cell">{{ $root.appdict.game1_label_student }}</th>
              <th align="center" class="w-20">{{ $root.appdict.game1_label_team }}</th>
              <th align="center" class="w-20">{{ $root.appdict.label_team }}</th>
              <th align="center" class="w-20">{{ $root.appdict.game1_label_loggedin }}</th>
            </tr>
          </thead>
          <tbody id="classtable">
          </tbody>
        </table>
      </div>

      <div class="block block-strong">
        <div class="row">
          <div class="col-60"></div>
          <div class="col-40">
            <button @click="nextPhase" class="col button button-large button-raised button-fill"
              style="margin-right: 1rem">{{ $root.appdict.game1_label_startgame }}</button>
          </div>
        </div>
      </div>

    </div>
  </div>


</template>


<style>
</style>


<script>
  return {
    data: function () {
      return {
        publicurl: ui.publicUrl,
      }
    },
    methods: {
      nextPhase: function () {
        ui.fn.nextPhase()
      }

    },
    on: {
      pageBeforeIn: function () {
        clearInterval(ui.update)

        let refreshPaused = false

        function updatePage() {
          ipcRenderer.send('ipcF2M_getClassVars')


        }

        updatePage()



        ipcRenderer.on('ipcM2F_renderClassVars', (event, arg) => {
          if (refreshPaused) return
          console.log('Re-rendering Class Vars')


          let classInfo = { player: arg, appdict: framework.data.appdict }
          let compiledHTML = ui.tmp.game1_playerTable(classInfo)
          $$("#classtable").html(compiledHTML)

          ui.tmp.teamPickerList = {}

          arg.forEach(student => {
            ui.tmp.teamPickerList[student] = framework.picker.create({
              inputEl: `#team-picker-${student.username}`,
              cols: [
                {
                  textAlign: 'center',
                  values: [
                    `${framework.data.appdict.label_team} 1`,
                    `${framework.data.appdict.label_team} 2`,
                    `${framework.data.appdict.label_team} 3`
                  ]
                }
              ], on: {
                open: function () {
                  refreshPaused = true
                },
                close: function (picker) {
                  refreshPaused = false
                  $('.btn_editClass').removeClass('disabled')
                  $('.btn_exportClass').removeClass('disabled')

                  const id = picker.$inputEl[0].dataset.id
                  const newTeam = picker.value[0].replace(`${framework.data.appdict.label_team} `, '')

                  console.log(newTeam)
                  ipcRenderer.send('ipcF2M_assignTeamToStudent', { id: id, team: newTeam })

                }
              }
            })

            // Display team for each logged-in student
            if (student.loggedin) ui.tmp.teamPickerList[student].setValue([`${framework.data.appdict.label_team} ${student.team}`])
          })




        })

        ui.update = setInterval(updatePage, 800)
      },
      pageBeforeOut: function () {
        ipcRenderer.removeAllListeners('ipcM2F_renderClassVars')
      }
    }
  }
</script>