<template>
  <v-menu>
    <template v-slot:activator="{ props }">
      <v-btn
        v-bind="props"
        variant="text"
        prepend-icon="mdi-translate"
        class="text-none"
      >
        {{ getCurrentLanguageName() }}
        <v-icon class="ml-1">mdi-chevron-down</v-icon>
      </v-btn>
    </template>

    <v-list min-width="150">
      <v-list-item
        v-for="locale in supportedLocales"
        :key="locale.code"
        :active="locale.code === currentLocale"
        @click="switchLanguage(locale.code)"
      >
        <v-list-item-title>{{ locale.name }}</v-list-item-title>
        <template v-slot:append>
          <v-icon v-if="locale.code === currentLocale" color="primary">
            mdi-check
          </v-icon>
        </template>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { supportedLocales, setLocale, getCurrentLocale } from '@/locales'

// 使用i18n的全局实例
useI18n()

const currentLocale = computed(() => getCurrentLocale())

function getCurrentLanguageName() {
  const current = supportedLocales.find(l => l.code === currentLocale.value)
  return current?.name || 'Language'
}

function switchLanguage(localeCode) {
  setLocale(localeCode)
}
</script>
