<template>
  <div id="stove-wrapper" class="relative z-[5]" />
</template>
<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 gnbData = gameData?.stove_gnb_json

const currentDomain = window.location.protocol + '//' + window.location.hostname;
if (typeof window !== 'undefined' && (window as any).StoveGnb) {
    mountedInstance = (window as any).StoveGnb.mount('#stove-wrapper', {
        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: {
                default: gnbData?.skin_type === 'gnb-dark-mini' ? 'dark' : 'light',
                support: ['dark', 'light'],
            },
            mini: true,
            fixed:false,
        },
    })
}
})

onBeforeUnmount(() => {
  if (mountedInstance && typeof mountedInstance.destroy === 'function') {
    mountedInstance.destroy()
  }
  mountedInstance = null
})
</script>