<script lang="ts" setup>
import { alertController, toastController, useIonRouter } from "@ionic/vue";
import { checkbox, close, contrastOutline, information, languageOutline, refresh } from "ionicons/icons";

const { t } = useI18n();
const router = useIonRouter();
const { cacheSize, calculateCacheSize, clearCache } = useCacheSize();
const { isChecking, getCurrentVersion, checkAndPromptUpdate } = useAppUpdate();
const { currentLanguage } = useLanguage();
const { theme } = useTheme();
const themeNames = {
  light: t("settings.themeLight"),
  dark: t("settings.themeDark"),
  auto: t("settings.themeAuto"),
};
const currentVersion = await getCurrentVersion();

function handleClearCache() {
  clearCache();
  calculateCacheSize();
  toastController.create({
    message: t("settings.cacheCleared"),
    duration: 2000,
    icon: checkbox,
    position: "bottom",
    color: "success",
  }).then(toast => toast.present());
}

async function handleCheckUpdate() {
  checkAndPromptUpdate();
}

onMounted(() => {
  calculateCacheSize();
});
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <ion-list lines="full">
        <ion-list-header>
          <ion-label>{{ t("settings.title") }}</ion-label>
        </ion-list-header>
        <ion-item button @click="router.push('/system-settings/language')">
          <div class="flex justify-between w-full items-center">
            <div class="flex-center space-x-2">
              <div class="icon">
                <ion-icon :icon="languageOutline" class="text-lg" />
              </div>
              <div class="text-sm font-semibold">
                {{ t("settings.language") }}
              </div>
            </div>
            <div class="end">
              {{ currentLanguage.nativeName }}
            </div>
          </div>
        </ion-item>
        <ion-item button @click="router.push('/system-settings/theme')">
          <div class="flex justify-between w-full items-center">
            <div class="flex-center space-x-2">
              <div class="icon">
                <ion-icon :icon="contrastOutline" class="text-lg" />
              </div>
              <div class="text-sm font-semibold">
                {{ t("settings.theme") }}
              </div>
            </div>
            <div class="end">
              {{ themeNames[theme] }}
            </div>
          </div>
        </ion-item>
        <ion-item button>
          <div class="flex justify-between w-full items-center">
            <div class="flex-center space-x-2">
              <div class="icon">
                <ion-icon :icon="information" class="text-lg" />
              </div>
              <div class="text-sm font-semibold">
                {{ t("settings.aboutUs") }}
              </div>
            </div>
          </div>
        </ion-item>
        <ion-item button @click="handleClearCache">
          <div class="flex justify-between w-full items-center">
            <div class="flex-center space-x-2">
              <div class="icon">
                <ion-icon :icon="close" class="text-lg" />
              </div>
              <div class="text-sm font-semibold">
                {{ t("settings.clearCache") }}
              </div>
            </div>
            <div class="end">
              {{ cacheSize }}
            </div>
          </div>
        </ion-item>
        <ion-item button @click="handleCheckUpdate">
          <div class="flex justify-between w-full items-center">
            <div class="flex-center space-x-2">
              <div class="icon">
                <ion-icon :icon="refresh" class="text-lg" :class="{ 'animate-spin': isChecking }" />
              </div>
              <div class="text-sm font-semibold">
                {{ t("settings.checkUpdate") }}
              </div>
            </div>
            <div class="end">
              {{ currentVersion }}
            </div>
          </div>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

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

ion-item {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 6px;
  --padding-bottom: 6px;
  border-radius: 0.25rem;
}

.end {
  @apply text-sm text-gray-500;
}

.icon {
  @apply bg-[#1c1c1c] text-white;
}

.icon {
  @apply rounded-lg p-2 w-7 h-7 flex items-center justify-center;
}
</style>
