<template>
  <div class="vn-pp row justify-center">
    <toolbar>
      <q-btn
        :label="$t('changePassword')"
        icon="vpn_key"
        :to="{ query: { changePassword: true } }"
        flat/>
    </toolbar>
    <q-card class="vn-w-md">
      <q-card-section>
        <q-input
          v-model="user.name"
          :label="$t('userName')"
          readonly/>
      </q-card-section>
      <q-card-section>
        <q-input
          v-model="user.email"
          :label="$t('email')" />
      </q-card-section>
      <q-card-section>
        <q-input
          v-model="user.nickname"
          :label="$t('nickname')" />
      </q-card-section>
      <q-card-section>
        <q-select
          v-model="user.lang"
          :label="$t('language')"
          :options="languages"
          option-value="code"
          option-label="name"
          emit-value/>
      </q-card-section>
    </q-card>
    <q-dialog v-model="changePassword" persistent>
      <q-card style="width: 25em;">
        <q-card-section>
          <q-input
            v-model="oldPassword"
            :label="$t('oldPassword')"
            type="password"
            :rules="[val => !!val || $t('fieldIsRequired')]"
            autofocus
            dense/>
          <q-input
            v-model="newPassword"
            :label="$t('newPassword')"
            type="password"
            :rules="[val => !!val || $t('passwordCannotBeEmpty')]"
            dense>
            <template v-slot:append>
              <q-icon name="warning">
                <q-tooltip>
                  <div>
                    {{$t('passwordRequirements')}}
                  </div>
                  <ul class="q-pl-md">
                    <li>{{$t('charsLong', [requirements.length])}}</li>
                    <li>{{$t('alphabeticChars', [requirements.nAlpha])}}</li>
                    <li>{{$t('upperLetters', [requirements.nUpper])}}</li>
                    <li>{{$t('digits', [requirements.nDigits])}}</li>
                    <li>{{$t('simbols', [requirements.nPunct])}}</li>
                  </ul>
                </q-tooltip>
              </q-icon>
            </template>
          </q-input>
          <q-input
            v-model="repeatPassword"
            :label="$t('repeatPassword')"
            type="password"
            :rules="[val => val === newPassword || $t('passwordsDontMatch')]"
            dense/>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            :label="$t('cancel')"
            to="/user"
            flat
            color="primary"/>
          <q-btn
            :label="$t('accept')"
            @click="onChangePassword()"
            flat
            color="primary"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        :title="$t('save')"
        icon="check"
        color="accent"
        @click="onSave"
        fab/>
    </q-page-sticky>
  </div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'User',
  mixins: [Page],
  props: {
    changePassword: {
      type: Boolean,
      required: false
    }
  },
  data () {
    return {
      user: {},
      receiveInvoices: false,
      languages: null,
      requirements: {},
      oldPassword: '',
      newPassword: '',
      repeatPassword: ''
    }
  },
  mounted () {
    let filter = {
      fields: [
        'id',
        'name',
        'nickname',
        'lang',
        'email'
      ]
    }
    this.$axios.get(`Accounts/${this.$state.user.id}`, { params: { filter } })
      .then(res => (this.user = res.data))

    filter = {
      fields: [
        'code',
        'name',
        'orgName'
      ],
      where: { isActive: true }
    }
    this.$axios.get(`Languages`, { params: { filter } })
      .then(res => (this.languages = res.data))

    filter = {
      fields: [
        'id',
        'length',
        'nAlpha',
        'nUpper',
        'nDigits',
        'nPunct'
      ]
    }
    this.$axios.get(`UserPasswords`, { params: { filter } })
      .then(res => (this.requirements = res.data[0]))
  },
  methods: {
    onChangePassword: function () {
      this.oldPassword = ''
      this.newPassword = ''
      this.repeatPassword = ''

      this.$router.push({})
      this.$q.notify({
        message: this.$t('passwordChanged'),
        icon: 'check',
        color: 'green'
      })
    },
    onSave () {
      this.$axios.patch(`Accounts/${this.$state.user.id}`, this.user)
        .then(res => (this.$q.notify({
          message: this.$t('dataSaved'),
          icon: 'check',
          color: 'green'
        })))
    }
  }
}
</script>
