<script setup lang="ts">
import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
} from '@/components/ui/card';
import { toTypedSchema } from '@vee-validate/zod';
import { useForm } from 'vee-validate';
import type z from 'zod';
import { loginUser } from '~/lib/api/auth/login';
import { loginSchema } from '~/lib/schemas/auth';

definePageMeta({
    layout: 'auth',
    middleware: ['not-authenticated'],
});
useHead({
    title: 'Login - Warren',
});

// TODO: Get this from the backend
const OPEN_ID = false;
const loggingIn = ref(false);

const form = useForm({
    validationSchema: toTypedSchema(loginSchema),
});

const onSubmit = form.handleSubmit(
    async (values: z.output<typeof loginSchema>) => {
        if (loggingIn.value) {
            return;
        }

        loggingIn.value = true;

        const { success } = await loginUser(values.email, values.password);

        if (success) {
            await navigateTo({ path: '/' });
        }

        loggingIn.value = false;
    }
);
</script>

<template>
    <Card class="w-full max-w-sm">
        <CardHeader>
            <CardTitle class="text-2xl">Login</CardTitle>
            <CardDescription>
                Enter your email and password to log in to your account.
            </CardDescription>
        </CardHeader>

        <CardContent>
            <form id="login-form" class="grid gap-4" @submit.prevent="onSubmit">
                <FormField v-slot="{ componentField }" name="email">
                    <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="email"
                                type="email"
                                placeholder="name@example.com"
                                autocomplete="off"
                            />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                </FormField>

                <FormField v-slot="{ componentField }" name="password">
                    <FormItem>
                        <FormLabel>Password</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="password"
                                type="password"
                                autocomplete="off"
                            />
                        </FormControl>
                    </FormItem>
                    <FormMessage />
                </FormField>
            </form>
        </CardContent>

        <CardFooter class="flex-col gap-2">
            <Button
                type="submit"
                class="w-full"
                form="login-form"
                :disabled="loggingIn"
                >Log in</Button
            >
            <Button class="w-full" variant="outline" :disabled="!OPEN_ID"
                >OpenID Connect</Button
            >
            <NuxtLink to="/register" class="w-full">
                <Button class="w-full" variant="ghost">Register instead</Button>
            </NuxtLink>
        </CardFooter>
    </Card>
</template>
