<script setup lang="ts">
import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
} from '@/components/ui/card';
import { loginUser } from '~/lib/api/auth/login';

definePageMeta({
    layout: 'auth',
});

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

const inputValid = computed(
    () => email.value.trim().length > 0 && password.value.trim().length > 0
);

async function submit() {
    if (!inputValid.value) {
        return;
    }

    loggingIn.value = true;

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

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

    loggingIn.value = false;
}

function onKeyDown(e: KeyboardEvent) {
    if (e.key === 'Enter') {
        submit();
    }
}
</script>

<template>
    <Card class="w-full max-w-sm">
        <CardHeader>
            <CardTitle class="text-2xl">Sign in</CardTitle>
            <CardDescription>
                Enter your email and password to sign in to your account.
            </CardDescription>
        </CardHeader>
        <CardContent class="grid gap-4">
            <div class="grid gap-2">
                <Label for="email">Email</Label>
                <Input
                    id="email"
                    v-model="email"
                    type="email"
                    placeholder="your@email.com"
                    autocomplete="off"
                    required
                    @keydown="onKeyDown"
                />
            </div>
            <div class="grid gap-2">
                <Label for="password">Password</Label>
                <Input
                    id="password"
                    v-model="password"
                    type="password"
                    autocomplete="off"
                    required
                    @keydown="onKeyDown"
                />
            </div>
        </CardContent>
        <CardFooter class="flex-col gap-2">
            <Button class="w-full" :disabled="!inputValid" @click="submit"
                >Sign 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">Sign up instead</Button>
            </NuxtLink>
        </CardFooter>
    </Card>
</template>
