<script setup lang="ts">
import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
import { itGet, itPost } from "@/fetchHelpers";
import { onMounted, ref, watch } from "vue";

// TODO: make translation
const items = ref([
  {
    label: "Aktivität",
    subtitle: "z.B. “Deiner Trainer hat dir Feedback zu einem Auftrag gegeben”",
    value: "USER_INTERACTION",
    checked: false,
  },
  {
    label: "Fortschritt",
    subtitle: "z.B. “Du kannst dich jetzt für die Prüfung anmelden.”",
    value: "PROGRESS",
    checked: false,
  },
  {
    label: "Information",
    subtitle:
      "z.B. “Am 20.12. zwischen 08:00 und 12:00 Uhr werden wir Wartungsarbeiten durchführen.”",
    value: "INFORMATION",
    checked: false,
  },
]);

watch(items, async (items) => {
  try {
    await itPost(
      "/api/notify/email_notification_settings/",
      items.filter((item) => item.checked).map((item) => item.value)
    );
    console.debug("Updated email notification settings");
  } catch (e) {
    console.error(`Could not update email notification settings: ${e}`);
  }
});

onMounted(async () => {
  const response = await itGet("/api/notify/email_notification_settings/");
  items.value = items.value.map((item) => {
    item.checked = response.includes(item.value);
    return item;
  });
});
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <header class="mt-12 mb-8">
        <h1>{{ $t("general.settings") }}</h1>
      </header>
      <main>
        <div class="bg-white p-6">
          <ItCheckboxGroup
            :items="items"
            :label="$t('settings.emailNotifications')"
            @update:items="items = $event"
          ></ItCheckboxGroup>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
