<template>
  <div data-name="home" class="page">

    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">{{ $root.appdict.home_nav_title }}</div>
      </div>
    </div>

    <div class="page-content">

      <div class="block mb0">
        <div class="row">
          <div class="col-30">

            <img src="./assets/logo.png">
          </div>

          <div class="col-70">
            <div class="block-title">{{ $root.appdict.home_info_title }}</div>
            <div class="block">
              {{ $root.appdict.home_info_body }}
            </div>
          </div>
        </div>
      </div>



      <div class="row">

        <div class="col-100">
          <div class="block block-strong mt1">

            <!--#region Class Selection Block -->
            <div class="row align-items-center">
              <div class="col-60"><strong>{{ $root.appdict.home_label_selectclass }}</strong></div>
              <button @click="createClass" class="col-20 button button-fill">{{ $root.appdict.btn_create }}</button>
              <button @click="importClass" class="col-20 button button-fill">{{ $root.appdict.btn_import }}</button>
            </div>


            <div class="row align-items-center">
              <div class="col-70">
                <div class="list">
                  <ul>
                    <li>
                      <div class="item-content item-input">
                        <div class="item-inner">
                          <div class="item-input-wrap">
                            <input type="text" readonly="readonly" id="picker-class" />
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>

              </div>

              <div class="col-30 segmented">
                <button @click="editClass"
                  class="btn_editClass button button-round button-small button-fill disabled">{{ $root.appdict.btn_edit }}</button>
                <button @click="exportClass"
                  class="btn_exportClass button button-round button-small button-outline disabled">{{ $root.appdict.btn_export }}</button>

              </div>
            </div>


            <!--#endregion -->

            <br>

            <!--#region Scenario Selection Block -->
            <div class="row align-items-center">
              <div class="col-60"><strong>{{ $root.appdict.home_label_selectscenario }}</strong></div>
              <button @click="createScenario" class="col-20 button button-fill">{{ $root.appdict.btn_create }}</button>
              <button @click="importScenario" class="col-20 button button-fill">{{ $root.appdict.btn_import }}</button>
            </div>

            <div class="row align-items-center">
              <div class="col-70">
                <div class="list">
                  <ul>
                    <li>
                      <div class="item-content item-input">
                        <div class="item-inner">
                          <div class="item-input-wrap">
                            <input type="text" readonly="readonly" id="picker-scenario" />
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="col-30 segmented">
                <button @click="editScenario"
                  class="btn_editScenario button button-round button-small button-fill disabled">{{ $root.appdict.btn_edit }}</button>
                <button @click="exportScenario"
                  class="btn_exportScenario button button-round button-small button-outline disabled">{{ $root.appdict.btn_export }}</button>

              </div>
            </div>



            <!--#endregion -->


          </div>
        </div>
      </div>

      <div class="block block-strong" style="background-color: #DCDBD8; margin-top: 3rem">
        <div class="row pv3">
          <div class="col-25"></div>
          <div class="col-50">
            <button @click="startGame" class="col button button-large button-raised button-fill"
              style="margin-right: 1rem; font-size: 1.2rem; height: 3rem;">{{ $root.appdict.home_btn_newsession }}</button>
          </div>
          <div class="col-25"></div>
        </div>
      </div>

      <div class="block" style="margin-top: 2rem;">
        <div class="row">
          <div class="col-20">
            <button @click="languageMenu"
              class="col button button-small button-raised button-fill color-blue">{{ $root.appdict.home_btn_language }}</button>
          </div>

          <div class="col-60 o-60">
            {{ $root.appdict.home_bottom }} <a href="http://curioproject.eu/">http://curioproject.eu/</a>
          </div>
          <div class="col-20 o-60 tr">
            v.2.4
          </div>
        </div>
      </div>

    </div>

  </div>
</template>


<style>

</style>


<script>
  return {
    data: function () {
      return {

      }
    },
    methods: {
      createClass: function () {
        ui.manageClass.initWith = { mode: 'create' }
        mainView.router.navigate({ name: 'manage_class' })
      },
      importClass: function () {
        let filepath = dialog.showOpenDialog({
          properties: ['openFile'],
          filters: [{ name: 'Curio Class', extensions: ['curioclass'] }]
        })

        if (filepath !== undefined) {
          fs.readFile(filepath[0], 'utf8', function (err, data) {
            if (err) return console.log(err)
            ipcRenderer.send('ipcF2M_importClassFile', JSON.parse(data));
          })
        }
      },
      editClass: function () {
        const classTitle = ui.tmp.pickerClass.getValue()[0]
        const classData = ipcRenderer.sendSync('ipcSyncF2M_getClass', classTitle)

        ui.manageClass.initWith = { mode: 'edit', data: classData }
        mainView.router.navigate({ name: 'manage_class' })

      },
      exportClass: function () {
        const classTitle = ui.tmp.pickerClass.getValue()

        if (classTitle === undefined) {
          framework.dialog.alert(framework.data.appdict.home_alert_noclass)
          return
        }

        let filepath = dialog.showSaveDialog({
          defaultPath: classTitle[0].replace(" ", "_"),
          filters: [{ name: 'Curio Class', extensions: ['curioclass'] }]
        })

        if (filepath !== undefined) {
          ipcRenderer.send('ipcF2M_exportClassFile', {
            path: filepath,
            class: classTitle[0]
          })

        }
      },
      createScenario: function () {
        ui.manageScenario.initWith = { mode: 'create' }
        mainView.router.navigate({ name: 'manage_scenario' })
      },
      importScenario: function () {
        let filepath = dialog.showOpenDialog({
          properties: ['openFile'],
          filters: [{ name: 'Curio Scenario', extensions: ['curioscenario'] }]
        })

        if (filepath !== undefined) {
          fs.readFile(filepath[0], 'utf8', function (err, data) {
            if (err) return console.log(err)
            ipcRenderer.send('ipcF2M_importScenarioFile', JSON.parse(data));
          })
        }
      },
      editScenario: function () {
        const scenarioTitle = ui.tmp.pickerScenario.getValue()[0]
        const scenarioData = ipcRenderer.sendSync('ipcSyncF2M_getScenario', scenarioTitle)

        ui.manageScenario.initWith = { mode: 'edit', data: scenarioData }
        mainView.router.navigate({ name: 'manage_scenario' })
      },
      exportScenario: function () {
        const scenarioTitle = ui.tmp.pickerScenario.getValue()

        if (scenarioTitle === undefined) {
          framework.dialog.alert(framework.data.appdict.home_alert_noscenario)
          return
        }

        let filepath = dialog.showSaveDialog({
          defaultPath: scenarioTitle[0].replace(" ", "_"),
          filters: [{ name: 'Curio Scenario', extensions: ['curioscenario'] }]
        })

        if (filepath !== undefined) {
          ipcRenderer.send('ipcF2M_exportScenarioFile', {
            path: filepath,
            scenario: scenarioTitle[0]
          })

        }

      },
      startGame: function () {

        // DEBUG: FORCE VALUES!!
        // ui.tmp.pickerClass.setValue(['Prototype Class'])
        // ui.tmp.pickerScenario.setValue(['Het Internet'])
        // console.log("FORCING VALUES VIA DEBUG!")

        if (ui.tmp.scenarioValues.length < 1 || ui.tmp.classValues < 1) {
          framework.dialog.alert(framework.data.appdict.home_alert_noscenario)
          return
        }

        if (ui.tmp.pickerClass.getValue() === undefined) {
          framework.dialog.alert(framework.data.appdict.home_alert_noclass)
          return
        }

        if (ui.tmp.pickerScenario.getValue() === undefined) {
          framework.dialog.alert(framework.data.appdict.home_alert_noscenario)
          return
        }

        // Start session and init game
        ipcRenderer.send('ipcF2M_startGameSession_startServer', {
          class: ui.tmp.pickerClass.getValue()[0],
          scenario: ui.tmp.pickerScenario.getValue()[0]
        })
        mainView.router.navigate({ name: 'waiting' })
      },
      languageMenu: function () {
        ipcRenderer.send('ipcF2M_saveSettings')
        

        mainView.router.navigate({ name: 'manage_translation' })

      }
    },
    on: {
      pageBeforeIn: function () {
        console.log("Home page init")

        ui.tmp.classValues = ipcRenderer.sendSync('ipcSyncMF_listDbClasses')
        ui.tmp.scenarioValues = ipcRenderer.sendSync('ipcSyncMF_listDbScenarios')

        if (ui.tmp.classValues.length > 0) {
          $('#picker-class').attr('placeholder', framework.data.appdict.label_clickselect)

          ui.tmp.pickerClass = framework.picker.create({
            inputEl: '#picker-class',
            cols: [
              {
                textAlign: 'center',
                values: ui.tmp.classValues
              }
            ], on: {
              close: function () {
                $('.btn_editClass').removeClass('disabled')
                $('.btn_exportClass').removeClass('disabled')

              }
            }
          })
        } else {
          $('#picker-class').attr('placeholder', framework.data.appdict.label_noclass)
        }

        if (ui.tmp.scenarioValues.length > 0) {
          $('#picker-scenario').attr('placeholder', framework.data.appdict.label_clickselect)

          ui.tmp.pickerScenario = framework.picker.create({
            inputEl: '#picker-scenario',
            cols: [
              {
                textAlign: 'center',
                values: ui.tmp.scenarioValues
              }
            ],
            on: {
              close: function () {
                $('.btn_editScenario').removeClass('disabled')
                $('.btn_exportScenario').removeClass('disabled')
              }
            }
          })
        } else {
          $('#picker-scenario').attr('placeholder', framework.data.appdict.label_noscenario)
        }


      }
    }
  }
</script>