<template>
  <q-layout view="hHh Lpr fFf">

    <!-- HEADER -->
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" @click="drawer = !drawer" />
        <q-toolbar-title>Hackathon 25 | Digitale Helfer für Dart (Navbar ist nur fürs testen da)</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <!-- SIDEBAR / DRAWER -->
    <q-drawer v-model="drawer" show-if-above bordered>
      <q-list>

        <q-item clickable v-ripple to="/">
          <q-item-section>
            Home
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple to="/rules">
          <q-item-section>
            Rules
          </q-item-section>
        </q-item>

        <q-expansion-item
          label="User"
          icon="folder"
          dense
          expand-separator
          switch-toggle-side
        >
          <q-list padding>

            <q-item clickable v-ripple to="/user/username">
              <q-item-section>
                Set Username
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/user/settings">
              <q-item-section>
                User Settings
              </q-item-section>
            </q-item>

          </q-list>

        </q-expansion-item>

        

        <q-expansion-item
          label="Game"
          icon="folder"
          dense
          expand-separator
          switch-toggle-side
        >
          <q-list padding>

            <q-item clickable v-ripple to="/game/select">
              <q-item-section>
                Create Select Game Type
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game/local/create">
              <q-item-section>
                Create Local Game
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game/online/create">
              <q-item-section>
                Create Online Game
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game/online/join">
              <q-item-section>
                Join Online Game
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game">
              <q-item-section>
                Game
              </q-item-section>
            </q-item>

          </q-list>

        </q-expansion-item>

        

        <q-expansion-item
          label="Tests"
          icon="folder"
          dense
          expand-separator
          switch-toggle-side
        >
          <q-list padding>

            <q-item clickable v-ripple to="/test_DartPicker">
              <q-item-section>
                Dart Picker
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/test_NumbersPage">
              <q-item-section>
                Numbers Input
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/test_WebSpeechApi">
              <q-item-section>
                Web Speech Api
              </q-item-section>
            </q-item>

          </q-list>
        </q-expansion-item>
      </q-list>
    </q-drawer>

    <!-- PAGE CONTAINER -->
    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer bordered class="bg-grey-2 text-dark">
      <q-toolbar class="justify-around">
        <q-btn flat round icon="settings" @click="onSettingsClick" />
        <q-btn flat round icon="sports_esports" @click="onGameClick" />
        <q-btn flat round icon="menu_book" @click="onRulesClick" />
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
import { LocalStorage } from 'quasar'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const drawer = ref(false)

function onSettingsClick () {
  const path = route.fullPath
  if (path != "/user/settings" && path != "/rules") {
    LocalStorage.setItem('returnPath', path)
  }
  
  router.push("/user/settings")
}
function onGameClick () {
  const path = route.fullPath
  const savedPath = LocalStorage.getItem('returnPath', route.fullPath)
  console.log(path)
  if (path == "/user/settings" || path == "/rules") {
    if (savedPath) {
      router.push(savedPath)
    } else {
      router.push("/")
    }
  }
}
function onRulesClick () {
  const path = route.fullPath
  if (path != "/user/settings" && path != "/rules") {
    LocalStorage.setItem('returnPath', path)
  }
  router.push("/rules")
}

</script>
