<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 token = event.data.token
    const res = await $fetch("https://door.svitan.dev/open", {
        method: "GET",
        headers: {
            Authorization: `Bearer ${token}`
        }
    })

    console.log(token)
    console.log(res)
    toast.add({ title: "Token saved", color: "success"  })
}

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