<template>
  <div>
    <div class="q-ma-md">
      <p class="text-h4">{{ data.cacheName }}</p>
      <p class="text-h5">{{ end1 + data.cachePoints + end2 }}</p>

      <div class="column q-gutter-y-md">
        <q-btn unelevated v-if="IsLoggedIn" color="primary" label="Zur Rangliste" to="/ranking/"/>
        <q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Belohnung" @click="reward = true">
          <q-dialog v-model="reward">
            <q-card>
              <q-card-section>
                <div class="text-h6">Jetzt ist eine gute Zeit, etwas Neues zu beginnen.</div>
              </q-card-section>
            </card>
          </q-dialog>
        <q-btn unelevated color="primary" label="Zur Startseite" to="/"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        reward: false,
        end1: "Gut gemacht, Du hast alle Stationen dieses Cache gefunden. Dir wurden ",
        end2: " Punkte gutgeschrieben." //TODO Punkte wirklich gutschreiben, ggf. Cache auf erledigt setzen
      }
    },
    computed: {
      isLoggedIn() {
        return localStorage.getItem('userToken'); //TODO Methode umschreiben --> funktioniert das?
      }
    },
    methods: {
      fetchData() {
        this.$axios.get('/api/allCaches')
          .then((response) => {
            console.log("/api/allCaches");
            console.log(JSON.stringify(this.data));
            console.log(this.data);
            console.log(response.data);
            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
            this.data.cacheName = cache.name;
            this.data.cachePoints = cache.rankingPoints;
          })
    }
  }
}
</script>
