<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 { registerUser } from '~/lib/api/auth/register';
import { registerSchema } from '~/lib/schemas/auth';

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

const registering = ref(false);

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

const onSubmit = form.handleSubmit(
    async (values: z.output<typeof registerSchema>) => {
        registering.value = true;

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

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

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

<template>
    <Card class="w-full max-w-sm">
        <CardHeader>
            <CardTitle class="text-2xl">Register</CardTitle>
            <CardDescription>Create a new user account</CardDescription>
        </CardHeader>
        <CardContent>
            <form
                id="register-form"
                class="grid gap-2"
                @submit.prevent="onSubmit"
            >
                <FormField v-slot="{ componentField }" name="name">
                    <FormItem>
                        <FormLabel>Username</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="username"
                                type="text"
                                placeholder="confused-cat"
                                autocomplete="off"
                            />
                        </FormControl>
                    </FormItem>
                    <FormMessage />
                </FormField>

                <FormField v-slot="{ componentField }" name="email">
                    <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                            <Input
                                v-bind="componentField"
                                id="email"
                                type="email"
                                placeholder="confusedcat@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="register-form"
                :disabled="registering"
                >Register</Button
            >
            <NuxtLink to="/login" class="w-full">
                <Button class="w-full" variant="ghost">Log in instead</Button>
            </NuxtLink>
        </CardFooter>
    </Card>
</template>
