<template>
  <div id="header-stove"></div>
</template>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig();
const { locale } = useI18n();
const { $i18n } = useNuxtApp();
const { gameData } = useGameDataStore();

const stoveInflowPath = runtimeConfig.public.stoveInflowPath;
const stoveGameNo = runtimeConfig.public.stoveGameNo;
const gnbData = gameData?.stove_gnb;

const languageCodes = computed(() => {
  const availableLocales = ($i18n as any).availableLocales;
  if (Array.isArray(availableLocales)) {
    return availableLocales.map(
      (localeCode: any) => localeCode.code || localeCode
    );
  }
  return [locale.value];
});

function loadGnb(locale: string) {
  locale = locale.toLowerCase();

  const gnbOption = {
    wrapper: "#header-stove",
    isResponsive: true,
    skin: gnbData?.skin_type || "gnb-dark-mini",
    widget: {
      gameListAndService: false,
      languageSelect: false,
      notification: false,
      stoveDownload: false,
    },
    global: {
      userGds: true,
      defaultSelectedLanguage: locale || "en",
      languageCoverages: languageCodes.value,
    },
    loginMethod: {
      params: {
        inflow_path: stoveInflowPath,
        game_no: stoveGameNo,
        show_play_button: gnbData?.stove_install_button_visible || "Y",
      },
      redirectCurrentPage: true,
      windowTitle: undefined,
    },
  };

  const cpHeader = new (window as any).cp.Header(gnbOption);
  cpHeader.render();
}

onMounted(() => {
  loadGnb(locale.value);
});
</script>
