<i18n>
{
  "en": {
    "confirmPassword": "Confirm Password",
    "email": "E-Mail",
    "emailError": "E-mail must be valid.",
    "name": "Name",
    "password": "Password",
    "passwordEmptyError": "Password can not be empty.",
    "passwordLengthError": "Minimum 8 characters required.",
    "passwordMatchError": "Passwords do not match.",
    "username": "Username",
    "usernameEmptyError": "Username can not be empty.",
    "usernameExistsError": "Username already taken.",
    "usernameHasWhitespaces": "No whitespaces allowed in the username."
  },
  "de": {
    "confirmPassword": "Passwort bestätigen",
    "email": "E-Mail",
    "emailError": "Keine gültige E-Mail.",
    "name": "Name",
    "password": "Passwort",
    "passwordEmptyError": "Passwort kann nicht leer sein.",
    "passwordLengthError": "Es sind mindestens 8 Zeichen erforderlich.",
    "passwordMatchError": "Passwörter stimmen nicht überein.",
    "username": "Benutzername",
    "usernameEmptyError": "Benutzername kann nicht leer sein.",
    "usernameExistsError": "Benutzername existiert bereits.",
    "usernameHasWhitespaces": "Leerzeichen sind im Benutzername nicht erlaubt."
  }
}
</i18n>

<template>
  <v-form class="signup-form" ref="form" v-model="valid">
    <v-text-field class="required"
      validate-on-blur
      v-model="user.username"
      :rules="usernameRules"
      autocomplete="off"
      counter
    >
      <template slot="label">{{ $t('username') }} <label class="error--text">*</label></template>
    </v-text-field>
    <v-text-field
      validate-on-blur
      type="password"
      v-model="user.password"
      :rules="passwordRules"
      autocomplete="off"
    >
      <template slot="label">{{ $t('password') }} <label v-if="!id" class="error--text">*</label></template>
    </v-text-field>
    <v-text-field
      validate-on-blur
      type="password"
      v-model="user.confirmPassword"
      :rules="confirmPasswordRules"
      autocomplete="off"
    >
      <template slot="label">{{ $t('confirmPassword') }} <label v-if="!id" class="error--text">*</label></template>
    </v-text-field>
    <v-text-field
      :label="$t('name')"
      autocomplete="off"
      v-model="user.name"
    ></v-text-field>
    <v-text-field
      validate-on-blur
      :label="$t('email')"
      :rules="emailRules"
      autocomplete="off"
      v-model="user.email"
    ></v-text-field>
  </v-form>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'UserCreateForm',
  props: ['id', 'value'],
  data () {
    return {
      valid: true,
      usernameError: false,
      usernameExistsError: false,
      usernameRules: [
        v => !!v || this.$t('usernameEmptyError'),
        v => !this.usernameError || this.$t('usernameError'),
        v => !/\s/.test(v) || this.$t('usernameHasWhitespaces'),
        v => this.usernameTakenValidation(v) || this.$t('usernameExistsError')
      ],
      passwordRules: [
        v => this.pwRequired(v) || this.$t('passwordEmptyError'),
        v => this.pwLength(v) || this.$t('passwordLengthError')
      ],
      confirmPasswordRules: [
        v => this.pwRequired(v) || this.$t('passwordEmptyError'),
        v => v === this.user.password || this.$t('passwordMatchError')
      ],
      confirmPasswordError: false,
      emailRules: [
        v => this.$validateEmail(v) || this.$t('emailError')
      ],
      user: {
        username: '',
        password: '',
        confirmPassword: '',
        name: '',
        email: ''
      },
      username: ''
    }
  },
  computed: {
    ...mapState('users', ['dialog']),
    show () { return this.dialog.show },
    usernameField () { return this.user.username }
  },
  watch: {
    show (value) {
      if (value) {
        this.$refs.form.resetValidation()
        this.loadForm()
      }
    },
    value: {
      deep: true,
      handler () {
        this.user = this.value
      }
    },
    user: {
      deep: true,
      handler () {
        this.$emit('input', this.user)
      }
    },
    usernameField () {
      this.usernameExistsError = false
    }
  },
  methods: {
    validate () {
      return this.$refs.form.validate()
    },
    setUsernameTakenError () {
      this.usernameExistsError = true
      this.$refs.form.validate()
    },
    usernameTakenValidation (v) {
      if (this.user.username === this.username) return true
      else return !this.usernameExistsError
    },
    pwRequired (v) {
      if (!!v || this.id) return true
      else return false
    },
    pwLength (v) {
      if (this.id && !v) return true
      else return v.length >= 8
    },
    loadForm () {
      if (this.id) this.loadUser(this.id)
      else this.clearForm()
    },
    loadUser (id) {
      this.$http('/api/users/' + id).then(response => {
        const user = response.data
        // Username is used for username taken validation
        this.username = user.username
        this.user.username = user.username
        this.user.email = user.email
        this.user.name = user.name
        this.user.password = ''
        this.user.confirmPassword = ''
      })
    },
    clearForm () {
      this.user.username = ''
      this.user.email = ''
      this.user.name = ''
      this.user.password = ''
      this.user.confirmPassword = ''
    }
  },
  created () {
    this.loadForm()
  }
}
</script>

<style scoped>
.signup-form {
  width: 300px;
}
</style>
