<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="teams" label="Teams" icon="group"/>
        <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">

          <div class="row">
            <div class="col" align="center">
              <b>
                Mein Nutzername
              </b>
            </div>
            <div class="col" align="center">
              BuGaCacher2019
            </div>
          </div>
          <hr/>
          <div class="row text-center">
            <div class="col">
              <b>
                Meine Email
              </b>
            </div>
            <div class="col" align="center">
              muster.mail@muster.de
            </div>
          </div>
          <hr/>
          <div class="row">
            <div class="col" align="center">
              <b>
                Meine Ranglistenposition
              </b>
            </div>
            <div class="col" align="center">
              1234
            </div>
          </div>
          <hr/>
          <div class="row">
            <div class="col" align="center">
              <b>
                Mein Team
              </b>
            </div>
            <div class="col" align="center">
              BuGa19Community
            </div>
          </div>
          <hr/>
          <div class="row">
            <div class="col" align="center">
              <b>
                Teamranglistenposition
              </b>
            </div>
            <div class="col" align="center">
              2019
            </div>
          </div>
          <hr/>
        </q-tab-panel>
        <q-tab-panel name="teams">
          <div class="q-pa-md" align="center">
            <q-btn-dropdown color="primary" label="BuGa19Community" size="20px">
              <q-list>
                <q-item clickable v-close-popup>
                  <q-item-section>
                    <q-item-label>BuGa19Community</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup>
                  <q-item-section avatar>
                    <q-avatar icon="group_add" color="primary" text-color="white"/>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Offene Teameinladungen</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup>
                  <q-item-section avatar>
                    <q-avatar icon="add" color="primary" text-color="white"/>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Neues Team erstellen</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
          <hr/>
          <div align="center">
            <b>
              Teammitglieder
            </b>
          </div>
          <br/>
          <div align="center">
            BuGaCacher2019
            <br/>
            Max
            <br/>
            Timo
            <br/>
            Katharina
            <br/>
            Michael
            <br/>
            Robin
          </div>
          <br/>
          <div class="row">
            <div class="col" align="center">
              <q-input outlined filled stack-label v-model="inviteMail"
                       type="text" label="Email des Nutzers"
                       :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
            </div>
            <div class="col" align="center">
              <q-btn label="Einladung versenden"
                     color="primary"
                     type="submit"/>
            </div>
          </div>
          <hr/>
          <div align="center">
            <b>
              Aktueller Teamstatus
            </b>
          </div>
          <br/>
          <div>
            Dienstag 15:00 Treffen zum Blumencache.
          </div>
          <br/>
          <q-input outlined filled stack-label v-model="teamStatus"
                   type="text" label="Neuer Teamstatus"/>
          <div align="center">
            <q-btn label="Teamstatus aktualisieren"
                   color="primary"
                   type="submit"/>
          </div>

        </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="continueCache(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: 'profile',
        startedCaches: [],
        inviteMail: "",
        teamStatus: "",
      }
    },
    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 () {
        if (localStorage.getItem('userToken')) {
          const token = JSON.parse(localStorage.getItem('userToken')).token;
        } else {
          return;
        }
        this.$axios.get('/api/getMyCaches', {params: {token}})
          .then((response) => {
            this.startedCaches = response.data;
          }).catch((error) => {
          // 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,});
        })
      },
      continueCache(cacheID) {
      },
      validateEmail(email) {
        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
      },
    }
  }
</script>
