<script lang="ts" setup>
import type { ThemeMode } from "@/composables/useTheme";

const { t } = useI18n();
const { theme } = useTheme();

const themes: { value: ThemeMode; label: string }[] = [
  { value: "light", label: t("settings.themeLight") },
  { value: "dark", label: t("settings.themeDark") },
  { value: "auto", label: t("settings.themeAuto") },
];

function handleThemeChange(event: CustomEvent) {
  const themeMode = event.detail.value as ThemeMode;
  theme.value = themeMode;
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
        <ion-back-button slot="start" />
        <ion-title>{{ t("settings.theme") }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <ion-list lines="full">
        <ion-radio-group :value="theme" @ion-change="handleThemeChange">
          <ion-item v-for="item in themes" :key="item.value">
            <ion-radio :value="item.value">
              <div class="theme-item">
                <div class="font-semibold">
                  {{ item.label }}
                </div>
              </div>
            </ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

.theme-item {
  @apply py-1;
}

ion-radio {
  width: 100%;
}
</style>
