<template>
  <div>
    <form>
      <div class="q-pa-md q-gutter-y-md">
        <p class="text-h5">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p>
        <q-input class="col" dense stack-label filled v-model="computedCache.name" label="Name"/>
        <q-input class="col" dense stack-label filled v-model="computedCache.rankingPoints" label="Punktewert"/>
        <p class="text-h6">Beschreibung</p>
        <q-editor
          :toolbar="[
            ['bold', 'italic', 'strike', 'underline'],
            ['undo', 'redo'],
            ['hr', 'link'],
            ['fullscreen'],
          ]"
          v-model="computedCache.description"
          min-height="5rem"
          max-height="50vh"
        />
        <p class="text-h6">Belohnung</p>
        <q-editor
          :toolbar="[
            ['bold', 'italic', 'strike', 'underline'],
            ['undo', 'redo'],
            ['hr', 'link'],
            ['fullscreen'],
          ]"
          v-model="computedCache.reward.rewardDescription"
          min-height="5rem"
          max-height="50vh"
        />
        <p class="text-h6">Stationen</p>
        <q-list bordered separator class="rounded-borders">

          <q-item v-for="(station, index) in computedCache.stationen" :key="index">
            <q-item-section avatar>
              <q-avatar color="primary" text-color="white">
                {{ index + 1 }}
              </q-avatar>
            </q-item-section>

            <q-item-section top>
              <q-item-label lines="1">
                <span class="text-grey-8">ID: {{ station.id ? station.id : "keine" }}</span>
              </q-item-label>
              <q-item-label lines="1" class="q-mt-xs text-body2">
                <span class="cursor-pointer">{{ station.description }}</span>
              </q-item-label>
              <q-item-label caption lines="1">
                Code: {{ station.code }}
              </q-item-label>
            </q-item-section>

            <q-item-section side>
              <div class="text-grey-8 q-gutter-xs">
                <q-btn @click="deleteStation(index)" class="" color="" flat dense round icon="delete"/>
                <q-btn @click="editStation(index)" class="" color="" flat dense round icon="edit"/>
              </div>
            </q-item-section>
          </q-item>

        </q-list>
        <div class="row reverse">
          <q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
        </div>
        <p class="text-h6">Endstation</p>
        <q-card flat bordered class="rounded-borders">
          <q-item>
            <q-item-section avatar>
              <q-avatar color="primary" text-color="white">
                {{ computedCache.stationen.length + 1 }}
              </q-avatar>
            </q-item-section>

            <q-item-section top>
              <q-item-label lines="1">
                <span class="text-grey-8">ID: {{ computedEndstation.id ? computedEndstation.id : "keine" }}</span>
              </q-item-label>
              <q-item-label lines="1" class="q-mt-xs text-body2">
                <span class="cursor-pointer">Endstation</span>
              </q-item-label>
              <q-item-label caption lines="1">
                Koordinaten: {{ computedEndstation.lattitude }}, {{ computedEndstation.longitude }}
              </q-item-label>
            </q-item-section>

            <q-item-section side>
              <div class="text-grey-8 q-gutter-xs">
                <q-btn @click="editEndStation" class="" color="" flat dense round icon="edit"/>
              </div>
            </q-item-section>
          </q-item>
        </q-card>
        <div class="row q-mt-xl">
          <q-btn @click="saveCache" class="full-width q-mb-md" color="primary" unelevated stack label="Cache speichern"
                 icon="save_alt"/>
          <q-btn to="/overview" class="full-width" color="negative" unelevated stack label="Abbrechen" />
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "Cache",
    data() {
      return {
        scrolldown: false,
        isNewCache: this.$route.params.id === undefined,
        //tempCache: {},
      }
    },
    beforeRouteUpdate(to, from, next) {
      console.log("beforeRouteUpdate: reset data and fetch");
      this.$store.commit('cacheCollector/RESET_NEW_CACHE');
      next()
    },

    beforeCreate: function () {
    },
    created: function () {
      console.log("isNewCache: " + this.isNewCache);
      console.log("Route Params: " + this.$route.params.id);
      if (!this.isNewCache) {
        this.$axios.get('/api/allCaches')
          .then((response) => {
            console.log("/api/allCaches");
            //console.log(JSON.stringify(response.data));
            console.log(response.data);
            let cache = response.data.find(cache => Number(cache.id) === Number(this.$route.params.id));
            console.log(cache);
            let stations = cache.stationen.filter(station => station.description !== "Endstation");
            let endstation = cache.stationen.find(station => station.description === "Endstation");
            console.log(stations);
            console.log(endstation);
            this.$store.commit('cacheCollector/SET_CACHE', cache);
            this.$store.commit('cacheCollector/SET_STATIONS', stations);
            this.$store.commit('cacheCollector/SET_ENDSTATION', endstation);
          })

      }
    },
    beforeMount: function () {
    },
    mounted: function () {
      console.log("Scrolldown: " + this.scrolldown)
    },
    updated: function () {
      if (this.scrolldown) {
        console.log("scroll down...");
        window.scrollTo(0, document.body.scrollHeight);
        this.scrolldown = false
      }
      //this.SET_CACHE(this.tempCache);
      //this.scrollToBottom();
    },
    methods: {
      editEndStation() {
        console.log("editEndStation()");
        const station = this.$store.getters['cacheCollector/GET_ENDSTATION'];
        console.log(station);
        this.$store.commit('cacheCollector/SET_TEMPSTATION', station);
        this.$router.push({path: `/tempendstation/`}); // add parameter

      },
      addStation() {
        this.$router.push({path: '/station'});
      },
      editStation(index) {
        console.log("editStation(" + index + ")");
        console.log(this.$store.getters['cacheCollector/GET_STATIONS']);
        const station = this.$store.getters['cacheCollector/GET_STATIONS'][index];
        console.log(station);
        if (station.hasOwnProperty('id')) {
          //this.$router.push({ path: '/station/'+station.id});
        } else {
          // TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router
          this.$store.commit('cacheCollector/SET_TEMPSTATION', station);
          this.$router.push({path: `/tempstation/${index}`}); // add parameter
        }
      },
      deleteStation(index) {
        // TODO wenn Station id hat, mit Backend abgleichen
        this.$store.commit('cacheCollector/REMOVE_STATION', index);
      },
      saveCache() {
        // commit to store, send to api, if success -> reset store
        let cache = JSON.parse(JSON.stringify(this.computedCache));
        console.log(cache);
        cache.stationen.push(this.computedEndstation);
        if (this.isNewCache) {

          this.$axios.post('/api/createCache', cache)
            .then((response) => {
              console.log("POST api/createCache: " + response.statusText);
              this.$store.commit('cacheCollector/RESET_NEW_CACHE');
              this.$router.push({path: '/overview'});
            }).catch((error) => {
            //TODO: Fehlermeldungen
            // Error
            let msg;
            let title;
            if (error.response) {
              // The request was made and the server responded with a status code
              title = "Problem with response!";
              msg = error.response;
            } else if (error.request) {
              // The request was made but no response was received
              title = "Problem with request!";
              msg = "Error occured due to wrong server request!"
              console.log(error.request);
            } else {
              // Something happened in setting up the request that triggered an Error
              title = "Error";
              msg = error.message;
              console.log('Error', error.message);
            }
            console.log(error.config);
            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
          })
        } else {
          this.$axios.put('/api/editCache', cache)
            .then((response) => {
              console.log("POST api/editCache: " + response.statusText);
              this.$store.commit('cacheCollector/RESET_NEW_CACHE');
              this.$router.push({path: '/overview'});
            })
        }
      },
    },
    computed: {
      computedCache: {
        set(value) {
          console.log("set cache");
          this.$store.commit('cacheCollector/SET_CACHE', value);
        },
        get() {
          console.log("get cache");
          return this.$store.getters['cacheCollector/GET_CACHE'];
        }
      },
      computedStations: {
        set(value) {
          this.$store.commit('cacheCollector/SET_STATIONS', value);
        },
        get() {
          return this.$store.getters['cacheCollector/GET_STATIONS'];
        }
      },
      computedEndstation: {
        set(value) {
          this.$store.commit('cacheCollector/SET_ENDSTATION', value);
        },
        get() {
          return this.$store.getters['cacheCollector/GET_ENDSTATION'];
        }
      },
    }
  }
</script>

<style scoped>

</style>
