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

onMounted(() => {
  const gameDataStore = useGameDataStore()
  const { stoveGnbJson, defaultLangCode, langCodes, theme } =
    storeToRefs(gameDataStore)

  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: stoveGnbJson.value?.notify_icon_visible ?? true,
        stoveDownload: stoveGnbJson.value?.stove_install_button_visible ?? true,
        languageSelect: false,
        themeSelect: false,
        stoveMenu: {
          active: false,
          mobile: true,
        },
      },
      global: {
        languageCoverages: langCodes.value,
        defaultSelectedLanguage: defaultLangCode.value ?? 'ko',
      },
      loginMethod: {
        redirectCurrentPage: true,
      },
      mode: {
        theme: {
          support: [theme.value],
          default: theme.value,
        },
        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>
