<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"
import axios from "axios"

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()

function onSubmit(event: FormSubmitEvent<Schema>) {
    const received = event.data.token
    axios
        .get<boolean>(useAPI("/opened"), {
            headers: useHeaders(received),
        })
        .then((res) => {
            handleResponse(res, () => {
                toast.add({ title: "Token saved", color: "success" })
                token.value = received
                navigateTo("/")
            })
        })
        .catch(handleRequestError)
}

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