<script setup lang="ts">
let mountedInstance: any = null

onMounted(() => {
  const gameDataStore = useGameDataStore()

  const { gameData } = storeToRefs(gameDataStore)
  const langCodes = gameData.value?.lang_codes
  const defaultLangCode = gameData.value?.default_lang_code
  const stoveGnbData = gameData.value?.stove_gnb_json
  const designTheme = gameData.value?.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: stoveGnbData?.notify_icon_visible ?? true,
        stoveDownload: stoveGnbData?.stove_install_button_visible ?? true,
        languageSelect: false,
        themeSelect: false,
        stoveMenu: {
          active: false,
          mobile: true,
        },
      },
      global: {
        languageCoverages: langCodes,
        defaultSelectedLanguage: defaultLangCode ?? 'ko',
      },
      loginMethod: {
        redirectCurrentPage: true,
      },
      mode: {
        theme: {
          support: designTheme === 1 ? ['light'] : ['dark'],
          default: 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 id="stove-wrap" class="relative h-[48px] z-[5]" />
</template>
