<template>
  <div>
    <v-card v-if="user" :loading="loading" style="margin-top: 3px">
      <v-card-title>{{ user.firstname }} {{ user.lastname }}</v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Vornamen"
              :placeholder="user.firstname"
              v-model="firstname"
              readonly
            />
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Nachname"
              :placeholder="user.lastname"
              v-model="lastname"
              readonly
            />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Benutzername"
              :placeholder="user.username"
              v-model="username"
              readonly
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              ref="mail"
              outlined
              label="E-Mail"
              :placeholder="user.mail"
              v-model="mail"
              readonly
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="neues Password"
              type="password"
              v-model="password"
            />
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              ref="password"
              v-model="controlPassword"
              outlined
              label="neues Password bestätigen"
              type="password"
              :disabled="!password"
              :rules="[equal_password]"
            />
          </v-col>
        </v-row>
        <v-divider />
        <v-row>
          <v-col cols="12" sm="4">
            <v-text-field
              outlined
              label="Sperrlimit"
              readonly
              :value="(user.limit / 100).toFixed(2).toString() + '€'"
            />
          </v-col>
          <v-col cols="12" sm="4">
            <v-combobox
              outlined
              label="Sperrstatus"
              v-model="lock"
              append-icon
              readonly
            >
              <template v-slot:selection="data">
                <v-chip :color="lockColor">
                  {{ data.item }}
                </v-chip>
              </template>
            </v-combobox>
          </v-col>
          <v-col cols="12" sm="4">
            <v-combobox
              outlined
              label="Autosperre"
              v-model="autoLock"
              readonly
              append-icon
            >
              <template v-slot:selection="data">
                <v-chip :color="autoLockColor">
                  {{ data.item }}
                </v-chip>
              </template>
            </v-combobox>
          </v-col>
        </v-row>
        <v-row>
          <v-col v-bind:class="{ fulllineText: isFulllineText }">
            <v-combobox
              outlined
              multiple
              label="Gruppen"
              readonly
              v-model="user.group"
              append-icon
            >
              <template v-slot:selection="data">
                <v-icon class="ma-2">{{
                  data.item === 'user'
                    ? person
                    : data.item === 'bar'
                    ? bar
                    : data.item === 'moneymaster'
                    ? finanzer
                    : data.item === 'gastro'
                    ? gastro
                    : ''
                }}</v-icon>
              </template>
            </v-combobox>
          </v-col>
          <v-col v-bind:class="{ fulllineText: isFulllineText }">
            <v-text-field
              outlined
              :value="computeStatus"
              readonly
              label="Mitgliedsstatus"
            />
          </v-col>
          <v-col v-bind:class="{ fulllineText: isFulllineText }">
            <v-text-field
              outlined
              :value="user.voting ? 'ja' : 'nein'"
              readonly
              label="Stimmrecht"
            />
          </v-col>
        </v-row>
        <v-row>
          <v-col v-bind:class="{ fulllineText: isFulllineText }">
            <v-combobox
              chips
              outlined
              multiple
              label="Arbeitsgruppen"
              readonly
              v-model="user.workgroups"
              item-value="id"
              item-text="name"
              append-icon
            >
              <template v-slot:selection="data">
                <v-chip>{{ data.item.name }}</v-chip>
              </template>
            </v-combobox>
          </v-col>
        </v-row>
        <div class="subtitle-1">
          Gespeicherte Sessions
        </div>
        <v-card v-for="token in tokens" :key="token.id" outlined>
          <v-card-text>
            <v-row>
              <v-col
                >OS:
                <v-icon>
                  {{
                    token.platform === 'macos' || token.platform === 'iphone'
                      ? apple
                      : token.platform === 'windows'
                      ? windows
                      : token.platfrom === 'android'
                      ? android
                      : token.platform
                  }}
                </v-icon>
                <v-icon
                  v-if="
                    token.platform === 'macos' || token.platform === 'iphone'
                  "
                >
                  {{ token.platform === 'macos' ? mac : iphone }}
                </v-icon>
              </v-col>
              <v-col>
                Browser:
                <v-icon>
                  {{
                    token.browser === 'chrome'
                      ? chrome
                      : token.browser === 'firefox'
                      ? firefox
                      : token.browser === 'opera'
                      ? opera
                      : token.browser === 'safari'
                      ? safari
                      : token.browser
                  }}
                </v-icon>
              </v-col>
              <v-col>
                Letzter Aktualisierung: {{ token.timestamp.day }}.{{
                  token.timestamp.month
                }}.{{ token.timestamp.year }} um
                {{
                  10 > token.timestamp.hour
                    ? '0' + String(token.timestamp.hour)
                    : token.timestamp.hour
                }}:{{
                  10 > token.timestamp.minute
                    ? '0' + String(token.timestamp.minute)
                    : token.timestamp.minute
                }}:{{
                  10 > token.timestamp.second
                    ? '0' + String(token.timestamp.second)
                    : token.timestamp.second
                }}
              </v-col>
              <v-col>Lebenszeit: {{ calcLifefime(token.lifetime) }}</v-col>
              <v-col>
                <v-btn icon @click="deleteToken(token)">
                  <v-icon>
                    {{trashCan}}
                  </v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-text-field outlined label="Passwort" v-model="acceptedPassword" type="password" ref="acceptedPassword" :rules="[empty_password]"></v-text-field>
        <v-btn text color="primary" @click="save">Speicherns</v-btn>
      </v-card-actions>
      <v-expand-transition>
        <v-alert type="error" v-if="error">{{ error }}</v-alert>
      </v-expand-transition>
    </v-card>
  </div>
</template>

<script>
import {
  mdiAccount,
  mdiGlassCocktail,
  mdiCurrencyEur,
  mdiFoodForkDrink,
  mdiApple,
  mdiGoogleChrome,
  mdiFirefox,
  mdiOpera,
  mdiInternetExplorer,
  mdiAppleSafari,
  mdiLaptopMac,
  mdiCellphoneIphone,
  mdiTrashCan,
  mdiAndroid,
  mdiWindows
} from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Config',
  data() {
    return {
      apple: mdiApple,
      mac: mdiLaptopMac,
      iphone: mdiCellphoneIphone,
      android: mdiAndroid,
      mdiWindows: mdiWindows,
      chrome: mdiGoogleChrome,
      firefox: mdiFirefox,
      opera: mdiOpera,
      ie: mdiInternetExplorer,
      safari: mdiAppleSafari,
      person: mdiAccount,
      bar: mdiGlassCocktail,
      finanzer: mdiCurrencyEur,
      gastro: mdiFoodForkDrink,
      username: null,
      mail: null,
      firstname: null,
      lastname: null,
      password: null,
      controlPassword: null,
      trashCan: mdiTrashCan,
      isFulllineText: false,
      acceptedPassword: null,
      passError: null,
      equal_password: value =>
        this.password === value || 'Passwörter sind nicht identisch.',
      email: value => {
        if (value.length > 0) {
          const pattern = /^(([^<>()[\]\\.,;:\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 pattern.test(value) || 'keine gültige E-Mail'
        }
        return true
      },
      empty_password: () => {
        return this.acceptedPassword !== null ? true : 'Password wurde nicht gesetzt'
      }

    }
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('resize', this.getWindowWidth)
      this.getWindowWidth()
    })
  },
  methods: {
    ...mapActions({
      saveConfig: 'user/saveConfig',
      getStatus: 'user/getStatus',
      getTokens: 'user/getTokens',
      deleteToken: 'user/deleteToken'
    }),
    getWindowWidth() {
      this.isFulllineText = document.documentElement.clientWidth <= 600
    },
    save() {
      let user = {}
      if (this.firstname) user.firstname = this.firstname
      if (this.lastname) user.lastname = this.lastname
      if (this.username) user.username = this.username
      if (this.$refs.mail.validate()) {
        if (this.mail) user.mail = this.mail
      }
      if (this.$refs.password.validate()) {
        if (this.password) user.password = this.password
      }
      if (this.$refs.acceptedPassword.validate()) {
        this.saveConfig({oldUsername: user.username, ...user, acceptedPassword: this.acceptedPassword})
      } else {
        this.passError = "Du musst dein Password eingeben"
      }
      this.password = null
      this.controlPassword = null
      this.acceptedPassword = ''
    },
    calcLifefime(time) {
      if (time < 60) return String(time) + 'Sekunden'
      time = Math.round(time / 60)
      if (time < 60) return String(time) + 'Minuten'
      time = Math.round(time / 60)
      if (time < 24) return String(time) + 'Stunden'
      time = Math.round(time / 24)
      if (time < 7) return String(time) + 'Tage'
      time = Math.round(time / 7)
      if (time < 30) return String(time) + 'Wochen'
      time = Math.round(time / 30)
      if (time < 12) return String(time) + 'Monate'
      time = Math.round(time / 12)
      return String(time) + 'Jahre'
    }
  },
  computed: {
    ...mapGetters({
      user: 'user/user',
      error: 'user/error',
      loading: 'user/loading',
      status: 'user/status',
      tokens: 'user/tokens'
    }),
    lock() {
      return this.user.locked ? 'gesperrt' : 'nicht gesperrt'
    },
    lockColor() {
      return this.user.locked ? 'red' : 'green'
    },
    autoLock() {
      return this.user.autoLock ? 'aktiviert' : 'deaktiviert'
    },
    autoLockColor() {
      return this.user.autoLock ? 'green' : 'red'
    },
    computeStatus() {
      try {
        return this.status.find(a => a.id == this.user.statusgroup).name
      } catch (e) {
        return null
      }
    }
  },
  created() {
    this.getStatus()
    this.getTokens()
  }
}
</script>

<style scoped>
.fulllineText {
  flex-basis: unset;
}
</style>
