<template>
  <v-container grid-list-md text-xs-center class="auth-form">
    <v-layout row wrap justify-center class="auth-form">

      <v-flex v-if="!registrationCompleted" xs6>
        <v-form
          ref="form"
          lazy-validation>
          <div class="display-1 primary--text font-weight-thin mb-5">Signup</div>
          <v-text-field
            v-model="user.firstName"
            :rules="[rules.required]"
            :error-messages="errorMessages.firstName"
            label="First Name"
            name="firstName"
            placeholder="Blue"
            autofocus
            required
            @keyup.enter="signup"/>
          <v-text-field
            v-model="user.lastName"
            :rules="[rules.required]"
            :error-messages="errorMessages.lastName"
            label="Last Name"
            name="lastName"
            placeholder="Whale"
            required
            @keyup.enter="signup"/>
          <v-text-field
            v-model="user.email"
            :rules="[rules.required, rules.email]"
            :error-messages="errorMessages.email"
            label="Email"
            name="email"
            placeholder="blue@whale.com"
            required
            @keyup.enter="signup"/>
          <v-text-field
            v-model="user.username"
            :rules="[rules.required]"
            :error-messages="errorMessages.username"
            label="Username"
            name="username"
            placeholder="bluecetacious"
            required
            @keyup.enter="signup"/>
          <v-text-field
            v-model="user.password1"
            :append-icon="showPassword ? 'visibility_off' : 'visibility'"
            :rules="[rules.required, rules.min6]"
            :type="showPassword ? 'text' : 'password'"
            :error-messages="errorMessages.password1"
            label="Password"
            name="password1"
            placeholder="················"
            required
            @click:append="showPassword = !showPassword"
            @keyup.enter="login"/>
          <v-text-field
            v-model="user.password2"
            :rules="[rules.required, validatePassword]"
            :error-messages="errorMessages.password2"
            type="password"
            label="Password (again)"
            name="password2"
            placeholder="················"
            required
            @keyup.enter="signup"/>
          <span class="mr-5">
            An user already?
            <span
              class="active-link subheading primary--text"
              @click="goToLogin">
              Login!
            </span>
          </span>

          <v-btn @click="clear">clear</v-btn>
          <v-btn
            color="primary"
            @click="signup">
            signup
          </v-btn>

        </v-form>
      </v-flex>

      <v-flex v-else xs6>
        <div class="display-1 primary--text font-weight-thin mb-5">Please Verify your Email</div>
        <div class="title font-weight-thin">A verification email has been sent. Please check your inbox to activate your account.</div>
      </v-flex>

    </v-layout>
  </v-container>
</template>

<script>
import { USER_REGISTRATION } from '@/store/actions/user'
import { SHOW_ALERT } from '@/store/actions/alert'

import rules from '@/utils/rules'

export default {
  name: 'Signup',
  data () {
    return {
      user: {
        firstName: '',
        lastName: '',
        email: '',
        username: '',
        password1: '',
        password2: ''
      },
      rules,
      showPassword: false,
      errorMessages: {},
      registrationCompleted: false
    }
  },
  computed: {
    username () {
      return this.user.username
    },
    email () {
      return this.user.email
    }
  },
  watch: {
    username (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.errorMessages.username = ''
      }
    },
    email (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.errorMessages.email = ''
      }
    }
  },
  methods: {
    signup () {
      if (this.$refs.form.validate()) {
        this.$store
          .dispatch(USER_REGISTRATION, this.user)
          .then(() => {
            this.clear()
            this.registrationCompleted = true
          })
          .catch(error => {
            if (error.response) {
              this.errorMessages = error.response.data
            } else if (error.message) {
              this.$store.dispatch(SHOW_ALERT, {
                error: error.message
              })
            }
          })
      }
    },
    clear () {
      this.$refs.form.reset()
    },
    goToLogin () {
      this.$router.push({ name: 'login' })
    },
    validatePassword (value) {
      return this.user.password1 === value || "Passwords don't match."
    }
  }
}
</script>
