<template>
  <div>
    <q-img transition="fade"
         class="q-mb-md "
         :ratio="16/9"
         src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
    ></q-img>
    <div class="q-ma-md">
      <p class="text-h4">{{ cacheName }}</p>
      <p>{{ instruction }}</p>

      <div class="column q-gutter-y-md">
        <q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
        <q-btn @click="checkStation()" unelevated color="primary" label="QR-Code scannen (absenden)"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return { //TODO Lageplan einbinden
        cacheID: "",
        cacheName: "",
        code: "8/6",
        instruction: "Bitte begib Dich zu der auf der Karte angezeigten Position. An dieser Position wirst Du einen QR-Code finden. Wenn du ihn gefunden hast, drücke den Knopf zum Starten des QR-Scanners und gib uns die Berechtigung, Deine Kamera zu öffnen. Nachdem Du den QR-Code gescannt hast, erhältst du ein Rätsel zur Position der nächsten Station. Die Lösung zu dem Rätsel ist also das Versteck des nächsten QR-Codes."
      }
    },
    created() {
      this.fetchData();
    },
    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.cacheName = cache.name;
            this.cacheID = this.$route.params.cache;
          })
        },
        checkStation() {
          let params = this.setParams();
          console.log(params);
          this.$axios.get('/api/checkStation', {params})
            .then((response) => {
              console.log(response);
              console.log("Anfrage erfolgreich");

            }) .catch((error) => {
              console.log(error);
              console.log("Anfrage fehlgeschlagen");
            })
            this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
        },
        setParams() {
          console.log("setParams: ");
          let params = {};
          params.cacheID = this.code.split('/')[0];
          params.stationID = this.code.split('/')[1];
          params.durchgefuehrterCacheID = this.cacheID;
          console.log(params.cacheID + " und " + params.stationID);
          if (localStorage.getItem('userToken')) {
            params.token = JSON.parse(localStorage.getItem('userToken')).token;
          }
          return params;
        },
      }
    }
</script>
