<script setup lang="ts">
import Topbar from "~/components/layout/full/Topbar.vue";

const title = ref(
  "Matdash - Nuxt3 Typescript based Free Admin Dashboard Template"
);
useHead({
  meta: [{ content: title }],
  titleTemplate: (titleChunk) => {
    return titleChunk
      ? `${titleChunk} - Nuxt3 Typescript based Free Admin Dashboard Template`
      : "Matdash - Nuxt3 Typescript based Free Admin Dashboard Template";
  },
});


const { $encodeBase64, $decodeBase64 } = useNuxtApp();
const sidebarMenu = ref('');
const sessionState = ref('');
const issuer = ref('');
const code = ref('');
const cobaSetProfile = ref<any[]>([]);
const runtimeconfig = useRuntimeConfig();
const url = window.location.href;
const urlParams = new URL(url).searchParams;
sessionState.value = urlParams.get('session_state') || '';
issuer.value = urlParams.get('iss') || '';
code.value = urlParams.get('code') || '';

const response = $fetch(`${issuer.value}/protocol/openid-connect/token`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded', },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    client_id: runtimeconfig.public.keycloakClient, // Ganti dengan client ID Anda
    client_secret: runtimeconfig.public.keycloakSecretKey,
    code: code.value,
    redirect_uri: `${window.location.origin}`, // Ganti dengan redirect URI Anda
  })
}).then((response) => {
  const reUserInfo = $fetch(`${issuer.value}/protocol/openid-connect/userinfo`, {
    headers: {
      Authorization: `Bearer ${response.access_token}`,
    }
  })
    .then((response) => {
      const idMongose = response.idMongose
      const encodeProfile = $encodeBase64(JSON.stringify(response))
      localStorage.setItem('userProfile', encodeProfile)
      cobaSetProfile.value.push(encodeProfile)
      $fetch(`/api/sidebarItem`, {
        method: 'POST',
        body: { key: idMongose }
      })
        .then((response) => {
          localStorage.setItem('sidebarItems', $encodeBase64(JSON.stringify(response)))
          sidebarMenu.value = response.items
        }).catch((err) => {
          loadSidebarItemLocalStorage()
        })
      // $fetch(`http://10.10.150.131:8080/api/login/${idMongose}`, {
      //   headers: { 'Content-Type': 'application/json', },
      //   mode: 'no-cors'
      // })
      //   .then((response) => {
      //     console.log(response)
      //   })
    }).catch((err) => {
      loadSidebarItemLocalStorage()
    })
}).catch((err) => {
  loadSidebarItemLocalStorage()
})

function loadSidebarItemLocalStorage() {
  const as = JSON.parse($decodeBase64(localStorage.getItem('sidebarItems')))
  sidebarMenu.value = as.items
}
</script>

<template>
  <v-locale-provider>
    <!-- <Topbar /> -->
    <v-app>
      <LayoutFullMain :items="sidebarMenu" />
      <v-main class="mr-md-4">
        <div class="mb-3 hr-layout bg-containerBg">
          <v-container fluid class="page-wrapper bg-background pt-md-8 rounded-xl">
            <div class="maxWidth">
              <NuxtPage />
            </div>
          </v-container>
        </div>
      </v-main>
    </v-app>
  </v-locale-provider>
</template>
