<template>
    <main class="flex items-center justify-center min-w-screen min-h-screen">
        <UForm
            :schema="schema"
            :state="state"
            @submit="onSubmit"
            class="flex flex-col items-end justify-center gap-y-2"
        >
            <UFormField label="Token" name="token" size="xl" required>
                <UInput
                    v-model="state.token"
                    placeholder="Your token..."
                    size="xl"
                />
            </UFormField>

            <UButton type="submit" size="xl"> Submit</UButton>
        </UForm>
    </main>
</template>

<script lang="ts" setup>
import * as v from "valibot"
import type { FormSubmitEvent } from "@nuxt/ui"

const token = useToken()

const schema = v.object({
    token: v.pipe(v.string(), v.nonEmpty("Please enter your token")),
})
type Schema = v.InferOutput<typeof schema>

const state = reactive({
    token: "",
})
const toast = useToast()

async function onSubmit(event: FormSubmitEvent<Schema>) {
    const received = event.data.token
    await $fetch("https://door.svitan.dev/open", {
        method: "GET",
        headers: {
            Authorization: `Bearer ${received}`,
        },
        async onRequestError({ error }) {
            toast.add({
                title: "Error occurred",
                description: error.message,
                color: "error",
            })
        },
        async onResponse({ response }) {
            if (response.status === 200) {
                toast.add({ title: "Token saved", color: "success" })
                token.value = received
                navigateTo("/")
            } else if (response.status === 401) {
                toast.add({ title: "Token not valid", color: "error" })
            } else {
                toast.add({
                    title: "Error occurred",
                    description: await response.text(),
                    color: "error",
                })
            }
        },
    })
}

onMounted(() => {
    if (token.value) {
        return navigateTo("/")
    }
})
</script>
