<template>
  <q-page class="column no-wrap">
    <div class="bg-red col col-shrink" style="">
        <q-tabs
          v-model="tab"
          class="bg-grey-2"
          inline-label
          align="justify"
          active-bg-color="bg-grey-1"
          active-color="cyan-14"
          indicator-color="cyan-14"
          switch-indicator
        >
          <q-tab name="profile" label="Profil" icon="perm_identity"/>
          <q-tab name="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
          <q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
        </q-tabs>
      <q-separator color="grey-4"/>
    </div>

    <div class="col flex column">
      <q-tab-panels v-model="tab" animated swipeable class="col">

        <q-tab-panel name="profile" class=" fit">
        </q-tab-panel>

        <q-tab-panel name="startedCaches" class=" fit">
          <q-list>
            <q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
              <q-expansion-item
                class=""
                v-if="startedCache.cacheAccesDefinition.description == 'angefangen'"
                expand-icon-toggle
                expand-separator
                icon="location_on"
                :label="startedCache.cache.name"
                :caption=" startedCache.cache.description"
              >
                <q-item>
                  <q-item-section top avatar class="self-center">
                    <!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
                  </q-item-section>
                  <q-item-section>
                    <q-item-label caption>{{'Nächste Aufgabe: ' + startedCache.aktuelleStation.description }}
                    </q-item-label>
                    <q-item-label caption>{{'Ranglistenpunkte für diesen Cache: ' + startedCache.cache.rankingPoints}}
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side top class="self-center">
                  </q-item-section>
                </q-item>
                <q-item class="q-pr-sm reverse q-gutter-x-sm">
                  <q-btn @click="startCache(startedCache.id)" unelevated color="positive" stack icon="arrow_forward"
                         label="Fortfahren" size="sm"/>
                </q-item>
              </q-expansion-item>
            </q-card>
          </q-list>
        </q-tab-panel>

        <q-tab-panel name="finishedCaches" class="fit">
          <q-list>
            <q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
              <q-expansion-item
                class=""
                v-if="startedCache.cacheAccesDefinition.description == 'abgeschlossen'"
                expand-icon-toggle
                expand-separator
                icon="location_on"
                :label="startedCache.cache.name"
                :caption=" startedCache.cache.description"
              >
                <q-item>
                  <q-item-section top avatar class="self-center">
                    <!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
                  </q-item-section>
                  <q-item-section>
                    <q-item-label caption>{{'Erhaltene Punkte für diesen Cache: ' + startedCache.cache.rankingPoints }}</q-item-label>
                  </q-item-section>

                  <q-item-section side top class="self-center">
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-card>
          </q-list>
        </q-tab-panel>

      </q-tab-panels>
    </div>
  </q-page>

</template>

<style>
  /*
    .my-list-card-item
      padding-left: 8px
  */
</style>
<script>
  //import {dom} from 'quasar'
  //const {height, width} = dom
  export default {
    data() {
      return {
        tab: 'startedCaches' + 'finishedCaches',
        startedCaches: [],
      }
    },
    mounted: function () {
    },
    computed: {
      hasAdminState() {
        return this.$store.getters['auth/GET_ADMINSTATE'];
      }
    },
    created: function() {
      this.fetchUserCaches();
      this.$store.commit('auth/SET_AUTHENTICATED');
      this.$store.commit('auth/SET_USER');
    },
    methods: {
      fetchUserCaches: function() {
        const token = JSON.parse(localStorage.getItem('userToken'));
        this.$axios.get('http://localhost:8080/api/getMyCaches', { params: {token}} )
          .then((response) => {
          this.startedCaches = response.data;
          });
      },
      continueCache(cacheID) {
      }
    }
  }
</script>
