<template>
    <v-container fluid fill-height>
        <v-snackbar
            v-model="snackbar"
            :bottom="true"
            :center="true"
            :timeout="2000"
            color="error"
        >{{ text }}</v-snackbar>

        <v-layout align-center justify-center>
            <v-flex xs12 sm8 md4>
                <v-card class="pa-3">
                    <v-card-title>
                        <span class="headline">Masuk</span>
                    </v-card-title>
                    <v-card-text>
                        <v-container grid-list-md>
                            <v-layout row wrap>
                                <v-flex xs12>
                                    <v-text-field
                                        type="email"
                                        label="E-mail"
                                        v-model="user.email"
                                        :error-messages="emailErrors"
                                        @input="$v.user.email.$touch()"
                                        @blur="$v.user.email.$touch()"
                                    ></v-text-field>
                                </v-flex>
                                <v-flex xs12>
                                    <v-text-field
                                        label="Sandi"
                                        v-model="user.password"
                                        :error-messages="passwordErrors"
                                        :append-icon="pass ? 'visibility' : 'visibility_off'"
                                        :append-icon-cb="changeVisibility"
                                        :type="pass ? 'password' : 'text'"
                                        @input="$v.user.password.$touch()"
                                        @blur="$v.user.password.$touch()"
                                    ></v-text-field>
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-card-text>
                    <v-card-actions>
                        <v-menu>
                            <v-btn flat small slot="activator">
                                Lainnya <v-icon>arrow_drop_down</v-icon>
                            </v-btn>
                            <v-list>
                                <v-list-tile to="/pass-reset">
                                    <v-list-tile-title>Lupa Sandi</v-list-tile-title>
                                </v-list-tile>
                                <v-list-tile to="/resend">
                                    <v-list-tile-title>Kirim Ulang Verifikasi</v-list-tile-title>
                                </v-list-tile>
                                <v-list-tile to="/register">
                                    <v-list-tile-title>Daftar</v-list-tile-title>
                                </v-list-tile>
                            </v-list>
                        </v-menu>
                        <v-spacer></v-spacer>
                        <v-btn
                            color="black"
                            class="white--text"
                            @click="userSignin"
                            :disabled="!$v.user.$dirty || $v.user.$error || loading"
                        >Berikutnya</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
        <v-btn
            dark
            fixed
            bottom
            right
            round
            to="/"
        >
            <v-icon left>mdi-home-circle</v-icon> Beranda
        </v-btn>
    </v-container>
</template>

<script>
    import { required, email, minLength } from 'vuelidate/lib/validators'
    import store from '../store'

    export default {
        metaInfo: {
            titleTemplate: 'Masuk'
        },

        data: () => ({
            user: {
                email: '',
                password: ''
            },
            snackbar: false,
            pass: true,
            text: null,
            loading: false
        }),

        validations: {
            user: {
                email: { required, email },
                password: { required, minLength: minLength(8) }
            }
        },

        computed: {
            emailErrors() {
                const errors = []
                if (!this.$v.user.email.$dirty) return errors
                !this.$v.user.email.required && errors.push('Email dibutuhkan')
                !this.$v.user.email.email && errors.push('Email tidak valid')
                return errors
            },

            passwordErrors() {
                const errors = []
                if (!this.$v.user.password.$dirty) return errors
                !this.$v.user.password.required && errors.push('Sandi dibutuhkan')
                !this.$v.user.password.minLength && errors.push('Minimal 8 karakter')
                return errors
            }
        },

        methods: {
            userSignin() {
                this.loading = true

                const user = this.user
                this.$auth.login({
                    data: user,
                    success: (res) => {
                        localStorage.setItem('user', JSON.stringify(res.data.user))
                        store.commit('loginUser')
                        this.loading = false
                    },
                    error: (err) => {
                        if (err.response.status == 400) {
                            this.resetPass()
                            this.snackbar = true
                            this.text = 'Sandi salah'
                        } else if (err.response.status == 401) {
                            this.resetPass()
                            this.snackbar = true
                            this.text = 'E-mail belum diverifikasi'
                        } else if (err.response.status == 403) {
                            this.resetAll()
                            this.snackbar = true
                            this.text = 'Pengguna diblokir karena membuat kegiatan tidak sesuai'
                        } else if (err.response.status == 404) {
                            this.resetPass()
                            this.snackbar = true
                            this.text = 'E-mail tidak terdaftar'
                        } else {
                            this.snackbar = true
                            this.text = 'Terjadi error. Coba kembali'
                        }
                        this.loading = false
                    },
                    rememberMe: true,
                    redirect: this.$route.query.redirect ? this.$route.query.redirect : '/',
                    fetchUser: true
                })
            },

            changeVisibility() {
                this.pass = !this.pass
            },

            resetPass() {
                this.user.password = ''
                this.$v.user.password.$reset()
            },

            resetAll() {
                this.user = ''
                this.$v.user.$reset()
            }
        }
    }
</script>