<template>
  <v-app dark>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      fixed
      app
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
    </v-app-bar>
    <v-main>
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <v-footer
      :absolute="!fixed"
      app
    >
      <span>&copy; {{ new Date().getFullYear() }} CoffeeCup Developments - Letzte Synchronisierung: {{ getLastSync }}  </span>
    </v-footer>
  </v-app>
</template>

<script>

import { getAxiosConfig } from '@/constants'

export default {
  data () {
    return {
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'mdi-apps',
          title: 'Meine Wünsche',
          to: '/'
        },
        {
          icon: 'mdi-chart-bubble',
          title: 'Wunschliste',
          to: '/publicwishes'
        }
      ],
      miniVariant: false,
      title: 'Vuetify.js'
    }
  },
  computed: {
    getLastSync() {
      let dateObject = new Date(this.$store.state.wishes.lastSync);

      return this.formatTime(dateObject);
    }
  },
  methods: {
    leadingZero(num) {
      return `0${num}`.slice(-2)
    },
    formatTime(date) {
      return [date.getHours(), date.getMinutes(), date.getSeconds()]
        .map(this.leadingZero)
        .join(':');
    }
  },
  mounted() {
    if(this.$route.query.token) {
      localStorage.setItem('token', this.$route.query.token)
    }

    this.$store.dispatch("wishes/fetchPersonal")
    this.$store.dispatch("wishes/fetchClaimed")
    this.$store.dispatch("wishes/fetchPublic")
    this.$store.dispatch("users/fetchUsers")


    setInterval(() => {
      this.$store.dispatch("wishes/fetchPersonal")
      this.$store.dispatch("wishes/fetchClaimed")
      this.$store.dispatch("wishes/fetchPublic")
      this.$store.dispatch("users/fetchUsers")
    }, 15000)
  }
}
</script>

<style scoped>

</style>
