<script setup lang="ts">
import type { GameDataValue } from '#layers/types/api/gameData'
let mountedInstance: any = null

onMounted(() => {
  const gameDataStore = useGameDataStore()
  const gameData = gameDataStore.gameData as GameDataValue
  const langCodes = gameData?.lang_codes
  const defaultLangCode = gameData?.default_lang_code
  const stoveGnbData = gameData?.stove_gnb_json
  const designTheme = gameData?.design_theme

  const currentDomain =
    window.location.protocol + '//' + window.location.hostname
  if (typeof window !== 'undefined' && (window as any).StoveGnb) {
    const stoveGnbOptions = {
      logArea: currentDomain,
      useLanguageCodeFromPath: true,
      serviceTitle: {
        pc: '',
        mobile: '',
      },
      widget: {
        notification: true,
        stoveDownload: true,
        languageSelect: false,
        themeSelect: false,
        stoveMenu: {
          active: false,
          mobile: true,
        },
      },
      global: {
        languageCoverages: langCodes,
        defaultSelectedLanguage: defaultLangCode || 'en',
      },
      loginMethod: {
        redirectCurrentPage: true,
      },
      mode: {
        theme: {
          support: ['light', 'dark'],
          default: designTheme === 1 ? 'light' : 'dark',
          // support: designTheme === 1 ? ['light'] : ['dark'],
        },
        mini: true,
        layout: 'wide',
        fixed: false,
      }
    }
    mountedInstance = (window as any).StoveGnb.mount('#stove-wrap', stoveGnbOptions)

  }
})

onBeforeUnmount(() => {
  if (mountedInstance && typeof mountedInstance.destroy === 'function') {
    mountedInstance.destroy()
  }
  mountedInstance = null
})
</script>
<template>
  <div class="stove-gnb-new">
    <div id="stove-wrap" class="relative z-[5]" />
  </div>
</template>

<style scoped>
.stove-gnb-new {
  @apply h-[48px];
}
[data-theme='light'] {
  .stove-gnb-new {
    @apply bg-white;
  }
}
[data-theme='dark'] {
  .stove-gnb-new {
    @apply bg-black;
  }
}
</style>
