<template>
  <v-container>
    <v-layout row>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-card-text>
            <v-container>
              <form>
                <v-layout row>
                  <v-flex xs12 class="username" v-bind:class="existUsername">
                    <v-text-field
                      label="Username"
                      v-model="username"
                      :error-messages="usernameErrors"
                      @input="$v.username.$touch()"
                      @blur="$v.username.$touch();checkUsername();"
                      required
                    ></v-text-field>
                    <span class="input-group__messages input-group__error" v-if="existUsername">This username is already registered.</span>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12 class="email" v-bind:class="existEmail">
                    <v-text-field
                      label="E-mail"
                      v-model="email"
                      :error-messages="emailErrors"
                      @input="$v.email.$touch()"
                      @blur="$v.email.$touch();checkEmail();"
                      required
                    ></v-text-field>
                    <span class="input-group__messages input-group__error" v-if="existEmail">This E-mail is already registered.</span>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      label="Password"
                      v-model="password"
                      :error-messages="passwordErrors"
                      @input="$v.password.$touch()"
                      @blur="$v.password.$touch()"
                      required
                      type="password"></v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      label="Repeat password"
                      v-model="repeatPassword"
                      :error-messages="repeatPasswordErrors"
                      @input="$v.repeatPassword.$touch()"
                      @blur="$v.repeatPassword.$touch()"
                      required
                      type="password"></v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-btn @click="onSignup" :disabled="!$v.$dirty || $v.$error || existUsername || existEmail">Register</v-btn>
                    <v-btn @click="onClear">Clear</v-btn>
                  </v-flex>
                </v-layout>
              </form>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  import {validationMixin} from 'vuelidate'
  import {required, email, sameAs} from 'vuelidate/lib/validators'

  export default {

    mixins: [validationMixin],

    validations: {
      username: {required},
      email: {required, email},
      password: {required},
      repeatPassword: {sameAsPassword: sameAs('password')}
    },

    data: () => ({
      username: '',
      email: '',
      password: '',
      repeatPassword: '',
      existUsername: false,
      existEmail: false
    }),

    computed: {
      usernameErrors() {
        const errors = []
        if (!this.$v.username.$dirty) return errors
        !this.$v.username.required && errors.push('Username is required.')
        return errors
      },
      emailErrors() {
        const errors = []
        if (!this.$v.email.$dirty) return errors
        !this.$v.email.email && errors.push('Must be valid e-mail')
        !this.$v.email.required && errors.push('E-mail is required')
        return errors
      },
      passwordErrors() {
        const errors = []
        if (!this.$v.password.$dirty) return errors
        !this.$v.password.required && errors.push('Password is required')
        return errors
      },
      repeatPasswordErrors() {
        const errors = []
        if (!this.$v.repeatPassword.$dirty) return errors
        !this.$v.repeatPassword.sameAsPassword && errors.push('Passwords must be identical')
        return errors
      }
    },

    methods: {
      onSignup: async function () {
        try {
          //const register = await this.$store.dispatch('register', user)
        } catch (err) {
          console.log(err)
        }
      },
      onClear() {
        this.$v.$reset()
        this.username = ''
        this.email = ''
        this.password = ''
        this.repeatPassword = ''
      },
      async checkUsername() {
        this.existUsername = await this.$axios.$post('checkUsername', {username: this.username})
      },
      async checkEmail() {
        this.existEmail = await this.$axios.$post('checkEmail', {email: this.email})
      }
    }
  }
</script>