<template>
  <q-layout view="hhh Lpr lFf" @click.native="counter()">
    <q-header id="qheader" class="bg-white text-grey-14" elevated>
      <q-toolbar class="q-pa-md">
        <q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm"/>

        <q-toolbar-title>
          BuGa Geocaching
        </q-toolbar-title>

        <q-btn
          flat
          dense
          ripple
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu"/>
        </q-btn>
        <!--<div>Quasar v{{ $q.version }}</div>-->
      </q-toolbar>
    </q-header>

    <q-drawer
      side="left"
      v-model="leftDrawerOpen"
      bordered
      show-if-above
      content-class="">
      <q-list>
        <q-item-label header>BuGa Geocaching</q-item-label>
        <q-item
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/"
        >
          <q-item-section avatar>
            <q-icon name="directions"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Startseite</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="this.$store.state.auth.isAuthenticated"
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/qr-scanner"
        >
          <q-item-section avatar>
            <q-icon name="filter_center_focus"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>QR-Code Scanner</q-item-label>
          </q-item-section>
          </q-item>
        <q-item
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/Overview"
        >
          <q-item-section avatar>
            <q-icon name="map"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Alle Caches</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="this.$store.state.auth.isAuthenticated"
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/mycaches"
        >
          <q-item-section avatar>
            <q-icon name="bookmarks"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Meine Caches</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/ranking"
        >
          <q-item-section avatar>
            <q-icon name="list"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Rangliste</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="this.$store.state.auth.isAuthenticated"
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/Profile"
        >
          <q-item-section avatar>
            <q-icon name="perm_identity"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Profil</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="!this.$store.state.auth.isAuthenticated"
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/Register"
        >
          <q-item-section avatar>
            <q-icon name="assignment"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Registrieren</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="this.$store.state.auth.isAuthenticated"
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          @click="logout()"
          to="/"
        >
          <q-item-section avatar>
            <q-icon name="logout"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Logout</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="!this.$store.state.auth.isAuthenticated"
          clickable
          class="text-primary"
          v-ripple
          tag="a"
          to="/Login"
        >
          <q-item-section avatar>
            <q-icon name="logout"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>Login</q-item-label>
          </q-item-section>
        </q-item>

<!--        <q-item-->
<!--          disable-->
<!--          class="text-grey-5"-->
<!--        >-->
<!--          <q-item-section avatar>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>dev: {{ clickCounter }} clicks</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>

    <q-dialog v-model="dialogShow" persistent transition-show="scale" transition-hide="scale">
      <q-card :class="dialogColorBg" style="min-width: 300px">
        <q-card-section>
          <div class="text-h6">{{ dialogTitle }}</div>
        </q-card-section>

        <q-card-section>
          {{ dialogMessage }}
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn @click="dialogClose" flat label="OK" :color="dialogColorBtn" v-close-popup/>
        </q-card-actions>
      </q-card>
    </q-dialog>

  </q-layout>
</template>

<script>
  import {openURL} from "quasar";

  export default {
    name: "MyLayout",
    data() {
      return {
        leftDrawerOpen: this.$q.platform.is.desktop,
        clickCounter: 0,
      };
    },
    computed: {
      dialogShow: {
        get() {
          // console.log("get dialogShow: "+this.$store.state.dialog.dialog.show)
          return this.$store.state.dialog.dialog.show;
        },
        set(val) {
          // console.log("set dialogShow: "+val)
          this.$store.state.dialog.dialog.show = val;
        }
      },
      dialogMessage: {
        get() {
          // console.log("get dialogMessage: "+this.$store.state.dialog.dialog.message)
          return this.$store.state.dialog.dialog.message;
        },
      },
      dialogTitle: {
        get() {
          // console.log("get dialogTitle: "+this.$store.state.dialog.dialog.title)
          return this.$store.state.dialog.dialog.title;
        },
      },
      dialogColorBg: {
        get() {
          // console.log("get dialogColorBg: " + this.$store.state.dialog.dialog.colorBackground)
          return this.$store.state.dialog.dialog.colorBackground;
        },
      },
      dialogColorBtn: {
        get() {
          // console.log("get dialogColorBtn: "+this.$store.state.dialog.dialog.colorButton)
          return this.$store.state.dialog.dialog.colorButton;
        },
      }
    },
    created() {
      //this.evalAuthentication();
    },
    methods: {
      counter() {
        this.clickCounter++;
        //console.log(this.clickCounter);
      },
      dialogClose() {
        console.log("dialogClose(): ")
        this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
      },
      evalAuthentication: function () {
        this.$store.commit('auth/SET_AUTHENTICATED');
        this.$store.commit('auth/SET_USER');
      },
      logout: function () {
        console.log("logout()");
        console.log(JSON.parse(localStorage.getItem('userToken')));
        localStorage.removeItem('userToken');
        this.evalAuthentication();
      },

    }
  };
</script>

<style></style>
