<template>
  <main class="text-3x1 font-bold underline">
    <p>home</p>
    <button v-on:click="onClickSignOut()" v-if="isAuthenticated">Sign Out</button>
    <button v-on:click="onClickSignIn()" v-else>Sign In</button>
    <div v-if="isAuthenticated && user">
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(value, key) in user" :key="key">
            <td>{{ key }}</td>
            <td>{{ typeof value === 'string' ? value : JSON.stringify(value) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</template>

<script lang="ts" setup>
import { useLogto, type IdTokenClaims } from '@logto/vue';
import { ref } from 'vue';

console.log(import.meta.env);

const hostname = import.meta.env.VITE_HOSTNAME;
const { signIn, signOut, isAuthenticated, getIdTokenClaims } = useLogto();
const onClickSignIn = () => signIn(`${hostname}/callback`);
const onClickSignOut = () => signOut(hostname);

const user = ref<IdTokenClaims>();
if (isAuthenticated.value) {
  (async () => {
    const claims = await getIdTokenClaims();
    user.value = claims;
  })();
}
</script>
