<template>
  <div class="bg-white">
    <select
      class="text-black px-2 py-1 rounded-md"
      v-model="selectedLocale"
      @change="switchLanguage"
    >
      <option
        v-for="localeOption in availableLanguages"
        :key="localeOption"
        :value="localeOption"
      >
        {{ localeOption }}
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">
const gameDataStore = useGameDataStore();

// 사용 가능한 언어 목록
const availableLanguages = computed(() => {
  return gameDataStore.gameData?.lang_codes || ["ko"];
});

const { locale } = useI18n();
const switchLocalePath = useSwitchLocalePath();
const router = useRouter();

const selectedLocale = ref(locale.value);

// 언어 변경 함수
const switchLanguage = async () => {
  console.log(
    "🚀 ~ switchLanguage ~ selectedLocale.value:",
    selectedLocale.value
  );
  if (selectedLocale.value) {
    // URL 경로를 통해 언어 변경
    const path = switchLocalePath(selectedLocale.value);
    if (path) {
      await router.push(path);
    }
  }
};

// locale이 변경될 때 selectedLocale도 동기화
watch(locale, (newLocale) => {
  selectedLocale.value = newLocale;
});
</script>
