<template>
  <v-dialog v-model="show" max-width="500px" lazy>
    <transparent-card>
      <v-card-title primary-title>
        <h2 slot="title">Create Account</h2>
      </v-card-title>
      <v-card-text>
        <v-text-field @input="$v.$touch()" :rules="[usernameError]" v-model="username" label="Username"></v-text-field>
        <v-text-field @input="$v.$touch()" :rules="[emailError]" v-model="email" label="Email"></v-text-field>
        <v-text-field @input="$v.$touch()" v-model="password" label="Password" type="password"></v-text-field>
        <v-text-field @input="$v.$touch()" v-model="repeatPassword" label="Repeat Password"
          type="password"></v-text-field>
        <div class="text-xs-right">
          <v-btn flat color="primary" small>Have account? Sign In!</v-btn>
        </div>
      </v-card-text>
      <v-card-actions class="d-flex">
        <v-btn flat @click.stop="show = false">Cancel</v-btn>
        <v-btn :disabled="$v.$invalid" color="primary">Sign In</v-btn>
      </v-card-actions>
    </transparent-card>
  </v-dialog>
</template>

<script lang="ts">
import Vue from 'vue';
import { required, email, sameAs } from 'vuelidate/lib/validators';
import TransparentCard from '@/components/TransparentCard.vue';
import { validationMessage } from '../../utils';

export default Vue.extend({
  components: {
    TransparentCard
  },
  props: {
    open: {
      type: Boolean
    }
  },
  data() {
    return {
      username: '',
      email: '',
      password: '',
      repeatPassword: ''
    };
  },
  computed: {
    show: {
      get(): boolean {
        return this.open;
      },
      set(value: boolean) {
        if (!value) {
          this.$emit('close');
          this.resetForm();
        }
      }
    }
  },
  methods: {
    resetForm() {
      this.username = '';
      this.email = '';
      this.password = '';
      this.repeatPassword = '';

      this.$v.$reset();
    },
    usernameError() {
      return validationMessage(this.$v.username);
    },
    emailError() {
      return validationMessage(this.$v.email);
    }
  },
  validations: {
    username: { required },
    email: { required, email }
  }
});
</script>

<style lang="scss" scoped>
</style>