<template>
    <div>
        <div v-if="!token" class="content-l">
            <div class="col-2">
                <UiInput label="Name" required>
                    <input type="text" v-model="name">
                </UiInput>
                <UiInput label="Expires At">
                    <input type="date" v-model="expiresAt">
                </UiInput>
            </div>
            <div class="center">
                <UiButton @click="create" :disabled="name.length === 0">Create</UiButton>
            </div>
        </div>
        <div v-else class="content-l">
            <p class="tile-m">{{ token.token }}</p>
            <div class="center">
                <UiButton class="width-6rem">Copy</UiButton>
                <UiButton class="width-6rem" @click="usePopup().close()">Close</UiButton>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {TokenCreation, TokenSecret} from "~/auth/Token";
import {usePopup} from "~/components/ui/popup/Popup";

const name: Ref<string> = ref('');
const expiresAt = ref(new Date().toISOString().substring(0, 10));

const token: Ref<TokenSecret | undefined> = ref(undefined);
function create()
{
    if (!name.value)
    {
        return false;
    }
    TokenCreation.create(new TokenCreation(name.value, new Date(expiresAt.value)), (_token: TokenSecret) => {
        token.value = _token;
        usePopup().get()!.config.callback?.(_token);
    })
}
</script>

<style scoped>

</style>