<script lang="ts" setup>
import { useIonRouter } from "@ionic/vue";

const { t } = useI18n();
const router = useIonRouter();
const { languages, locale, setLanguage } = useLanguage();

function handleLanguageChange(event: CustomEvent) {
  const langCode = event.detail.value;
  setLanguage(langCode);

  // 返回上一页
  setTimeout(() => {
    router.back();
  }, 300);
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>{{ t("settings.languageTitle") }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true" class="ion-padding">
      <ion-list lines="full">
        <ion-radio-group :value="locale" @ion-change="handleLanguageChange">
          <ion-item v-for="lang in languages" :key="lang.code">
            <ion-radio :value="lang.code">
              <div class="language-item">
                <div class="font-semibold">
                  {{ lang.nativeName }}
                </div>
                <div class="text-xs text-gray-500">
                  {{ lang.name }}
                </div>
              </div>
            </ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped></style>
