<template>
    <v-row align="center" justify="center">
        <v-col cols="4">
            <v-container>
                <v-card>
                <v-toolbar color="primary" :dark="true">
                    <v-toolbar-title>Login</v-toolbar-title>
                </v-toolbar>
                <v-card-text>
                    <v-form>
                    <v-text-field prepend-icon="person" type="text" v-model="user.email" label="E-mail"></v-text-field>
                    <v-text-field
                        prepend-icon="lock"
                        type="password"
                        v-model="user.password"
                        label="password"
                    ></v-text-field>
                    </v-form>
                        <v-snackbar v-model="errorSnackBar">
                        Email ou mot de passe invalide.
                        <template v-slot:actions>
                            <v-btn color="red" variant="text" @click="errorSnackBar = false">
                            Fermer
                            </v-btn>
                        </template>
                    </v-snackbar>
                </v-card-text>
                <v-card-actions>
                    <div class="flex-grow-1"></div>
                    <v-btn color="primary" @click="login">Login</v-btn>
                </v-card-actions>
                </v-card>
                <v-btn color="red" @click="goHome()">Continuer sans se connecter</v-btn>

        </v-container>
        </v-col>
    </v-row>
      
</template>

<script setup>
import { useClient } from '@/plugins/clientPlugin';
import { useAuthStore } from '@/plugins/store/authStore';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const authStore = useAuthStore();
const client = useClient();
const router = useRouter()

let user = ref({});

let errorSnackBar = ref(false);

const goHome = () => {
    router.push('/');
}

async function login(){
    try {
        await authStore.login(client, user.value.email, user.value.password)
        router.push('/');
    } catch (error) {
        console.log(error);
        errorSnackBar.value = true;
    }
}

</script>