<script lang="ts" setup>
import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
import { ref } from "vue";
import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
import DefaultPageSwitcher from "@/components/DefaultPageSwitcher.vue";
import AppVersion from "@/components/AppVersion.vue";
import ReloadPwa from "@/components/ReloadPwa.vue";

const icon = "pi pi-cog";
const isDark = ref(true);

function handleDarkModeToggled(isDarkVar: boolean) {
  // Do something with isDark value
  // For example, update the root isDark value
  // Assuming the root component has an isDark ref
  isDark.value = isDarkVar;
}
</script>

<template>
  <div class="flex flex-column align-items-center mt-0">
    <div
      class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown md:mt-8"
    >
      <h1 class="text-4xl">
        {{ $t("settings.headline") }}
      </h1>
      <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
    </div>
    <div v-if="$t('settings.subTitle')" class="flex justify-content-center">
      <h5 class="text-2xl m-2">{{ $t("settings.subTitle") }}</h5>
    </div>
    <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
      <slot flex-specs="flex-1 m-0" name="selection"></slot>
    </div>
    <div
      class="opacity-100 transition-all transition-duration-500 transition-ease-in-out w-full lg:w-8"
    >
      <div class="flex flex-column justify-content-center">
        <div class="grid my-2">
          <div class="col text-center">
            {{ $t("settings.language") }}
          </div>
          <div class="col text-center">
            <LocaleSwitcher />
          </div>
        </div>
        <div class="grid my-2">
          <div class="col text-center">
            {{ $t("settings.defaultPage") }}
          </div>
          <div class="col text-center">
            <DefaultPageSwitcher />
          </div>
        </div>
        <div class="grid my-2">
          <div class="col text-center">
            {{ $t("settings.darkMode") }}
          </div>
          <div class="col text-center">
            <DarkModeSwitcher
              @dark-mode-toggled="handleDarkModeToggled"
            ></DarkModeSwitcher>
          </div>
        </div>
        <div class="grid my-2">
          <div class="col text-left">
            {{ $t("settings.version") }}
          </div>
          <div class="col text-center">
            <AppVersion />
          </div>
        </div>
        <div class="grid my-2">
          <div class="col text-center"></div>
          <div class="col text-center">
            <ReloadPwa />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
.col {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
