<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="Team" icon="group"/>
      </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">
          <p class="text-h5"> Persönliche Daten </p>
          <q-table
            :data="data"
            :columns="columns"
            row-key="name"
            hide-header
            hide-bottom
            table-class="my-custom"
          />
        </q-tab-panel>
        <q-tab-panel name="teams">
          <div class="q-pa-md" align="center">
            <q-btn-dropdown color="primary" :label="dropDownSelectedItem" size="20px">
              <q-list>
                <q-item clickable v-close-popup @click="dropDownSelectItem('team')">
                  <q-item-section>
                    <q-item-label v-html="teamName"></q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-close-popup @click="dropDownSelectItem('Offene Teameinladungen')">
                  <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 @click="dropDownSelectItem('Neues Team erstellen')">
                  <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>
          <p class="text-h5"> Teammitglieder </p>
          <q-table
            :data="teamData"
            :columns="teamColumns"
            row-key="name"
            table-class="my-custom"
            hide-bottom
            :pagination.sync="pagination"
          />
          <br/>
          <p class="text-h5"> Einladungen </p>
          <q-input outlined filled stack-label v-model="inviteMail"
                   type="text" label="Email des Nutzers"
                   :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
          <div align="center">
            <q-btn label="Einladung versenden"
                   color="primary"
                   type="submit"/>
          </div>
          <br/>
          <p class="text-h5"> Teamstatus </p>
          <p>{{currentTeamStatus}}</p>
          <q-input outlined filled stack-label v-model="teamStatus"
                   type="text" label="Neuer Teamstatus"
                   :rules="[val=>val.length<=160||'Status zu lang!']"/>
          <div align="center">
            <q-btn label="Teamstatus aktualisieren"
                   color="primary"
                   type="submit"/>
          </div>
        </q-tab-panel>

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

</template>

<style>
  .my-custom th {
    color: #027BE3 !important;
  }

  .my-custom tr {
    color: #027BE3 !important;
  }

  .my-custom td {
    color: #027BE3 !important;
  }
</style>
<script>
  //import {dom} from 'quasar'
  //const {height, width} = dom
  export default {
    data() {
      return {
        tab: 'profile',
        startedCaches: [],
        inviteMail: "",
        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
        teamStatus: "",
        userName: null,
        email: null,
        userRanking: null,
        teamName: null,
        teamRanking: null,
        dropDownSelectedItem: null,
        columns: [
          {
            name: 'desc',
            required: true,
            align: 'left',
            field: row => row.name,
            format: val => `${val}`,
          },
          {
            name: 'userData',
            required: true,
            align: 'left',
            field: 'userData',
          }
        ],
        data: [
          {
            name: 'Mein Nutzername',
            userData: this.userName,
          },
          {
            name: 'Meine Email',
            userData: this.email,
          },
          {
            name: 'Meine Ranglistenposition',
            userData: this.userRanking,
          },
          {
            name: 'Mein Team',
            userData: this.teamName,
          },
          {
            name: 'Teamranglistenposition',
            userData: this.teamRanking,
          },
        ],
        teamColumns: [
          {
            name: 'desc',
            label: 'Benutzername',
            required: true,
            align: 'left',
            field: row => row.name,
            format: val => `${val}`,
          },
          {
            name: 'ranking',
            label: 'Solo-Ranglistenpunkte',
            required: true,
            align: 'left',
            field: 'ranking',
            sortable: true,
          }
        ],
        teamData: [
          {
            name: 'BuGaCacher2019',
            ranking: 10,
          },
          {
            name: 'Max',
            ranking: 5,
          },
          {
            name: 'Timo',
            ranking: 4,
          },
          {
            name: 'Katharina',
            ranking: 3,
          },
          {
            name: 'Michael',
            ranking: 2,
          },
          {
            name: 'Robin',
            ranking: 1,
          },
        ],
        pagination: {
          sortBy: 'name',
          descending: false,
          page: 1,
          rowsPerPage: 10
          // rowsNumber: xx if getting data from a server
        },
      }
    },
    mounted: function () {
    },
    computed: {
      hasAdminState() {
        return this.$store.getters['auth/GET_ADMINSTATE'];
      },
    },
    created: function () {
      this.$store.commit('auth/SET_AUTHENTICATED');
      this.$store.commit('auth/SET_USER');
      this.userName = JSON.parse(localStorage.getItem('userToken')).name;
      this.data[0].userData = this.userName;
      this.email = JSON.parse(localStorage.getItem('userMail'));
      this.data[1].userData = this.email;
      this.getPersonalRanking();
      this.data[2].userData = this.userRanking;
      this.teamName = "BuGa19Community";
      this.data[3].userData = this.teamName;
      this.dropDownSelectedItem = this.teamName;
      this.teamRanking = "2019";
      this.data[4].userData = this.teamRanking;
    },
    methods: {
      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());
      },
      getPersonalRanking() {
        const token = JSON.parse(localStorage.getItem('userToken')).token;
        this.$axios.get('/api/getRankingPlace', {params: {token}})
          .then((response) => {
            this.userRanking = response.data;
            console.log(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,});
        })
      },
      getTeamData() {
        const userName = {name: JSON.parse(localStorage.getItem('userToken')).token};
        this.$axios.get('/api/getTeam', {params: userName})
          .then(response => {
            console.log("getTeam: " + response);
          }).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,});
        })

      },

      dropDownSelectItem(item) {
        if (item === 'team') {
          this.dropDownSelectedItem = this.teamName;
        } else {
          this.dropDownSelectedItem = item;
        }
      },
    }
  }
</script>
