<script setup lang="ts">
definePageMeta({
  middleware: ['auth'],
  roles:['super_admin','admin'],
})
import { ref } from "vue";
import {useAuth} from "#imports";

// const { setUserInfoStore,setSessionUserStore } = useUserInfoStore();
// const { getUserInfoStore } = storeToRefs(useUserInfoStore());
const { data, status, getCsrfToken, getProviders, signOut, getSession } = useAuth()
const tokens = ref('')
const getInfoUser = ref('')
onMounted(async () => {
  const headers = useRequestHeaders(['cookie']) as HeadersInit
  const { data: token } = await useFetch('/api/token', { headers })
  tokens.value = token.value
  getInfoUser.value = await getSession()
  // userAuthenticate(token.value)
  // setUserInfoStore(await getSession())
  // $fetch('/api/session').then(async (response) => {
  //   // console.log('sesseion',response)
  //   // useSessionLogin(response)
  //   setSessionUserStore(response)
  // })
})
const getUserFromComposable = async () => {
  // const a = useUseGetUserLoginComposables(getUserInfoStore.value)
  // const a= await useSessionLogin('getSess')
  // $fetch('/api/session').then(async (response) => {
  // console.log(await getSession())
  // console.log('ini b', a?.expires)
  //   console.log('sesseion',response)
  // })
}
</script>
<template>
  <v-row>
    <v-col cols="12" md="12">
      <v-card elevation="10">
        <v-card-item>
          <pre><span>Providers:</span> {{ getInfoUser }}</pre>
          <h5 class="text-h5 mb-3">Sample Page</h5>
          <p class="text-body-1">This is a sample page</p>
          <div class="mt-4">
            <v-btn @click="getUserFromComposable" color="primary" variant="outlined" block>useComposables</v-btn>

            <!-- <pre><span>Providers:</span> {{ tokens }}</pre> -->
          </div>
        </v-card-item>
      </v-card>
    </v-col>
  </v-row>
</template>
