<template>
  <div class="bg-white">
    <select
      v-model="selectedLocale"
      class="text-black px-2 py-1 rounded-md"
      @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>
