<template>
  <div v-if="preferences">
    <BaseCardSectionTitle :title="$t('household.household-preferences')" />
    <div class="mb-6">
      <v-checkbox v-model="local.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
      <div class="ml-8">
        <p class="text-subtitle-2 my-0 py-0">
          {{ $t("household.private-household-description") }}
        </p>
        <DocLink class="mt-2" link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work" />
      </div>
    </div>
    <div class="mb-6">
      <v-checkbox v-model="local.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
      <div class="ml-8">
        <p class="text-subtitle-2 my-0 py-0">
          {{ $t("household.lock-recipe-edits-from-other-households-description") }}
        </p>
      </div>
    </div>
    <div class="mb-6">
      <v-checkbox
        v-model="local.showAnnouncements"
        hide-details
        density="compact"
        color="primary"
        :label="$t('announcements.show-announcements-from-mealie')"
      />
      <div class="ml-8">
        <p class="text-subtitle-2 my-0 py-0">
          {{ $t("announcements.show-announcements-setting-description") }}
        </p>
      </div>
    </div>
    <v-select
      v-model="local.firstDayOfWeek"
      :prepend-icon="$globals.icons.calendarWeekBegin"
      :items="allDays"
      item-title="name"
      item-value="value"
      :label="$t('settings.first-day-of-week')"
      variant="underlined"
      flat
    />

    <BaseCardSectionTitle class="mt-5" :title="$t('household.household-recipe-preferences')">
      {{ $t("household.default-recipe-preferences-description") }}
    </BaseCardSectionTitle>
    <div class="preference-container">
      <div v-for="p in recipePreferences" :key="p.key">
        <v-checkbox v-model="local[p.key]" hide-details density="compact" :label="p.label" color="primary" />
        <p class="ml-8 text-subtitle-2 my-0 py-0">
          {{ p.description }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ReadHouseholdPreferences } from "~/lib/api/types/household";

const preferences = defineModel<ReadHouseholdPreferences>({ required: true });
const local = reactive({ ...preferences.value });
watch(local, (newVal) => { preferences.value = { ...newVal }; });

const i18n = useI18n();

type Preference = {
  key: keyof ReadHouseholdPreferences;
  label: string;
  description: string;
};

const recipePreferences: Preference[] = [
  {
    key: "recipePublic",
    label: i18n.t("group.allow-users-outside-of-your-group-to-see-your-recipes"),
    description: i18n.t("group.allow-users-outside-of-your-group-to-see-your-recipes-description"),
  },
  {
    key: "recipeShowNutrition",
    label: i18n.t("group.show-nutrition-information"),
    description: i18n.t("group.show-nutrition-information-description"),
  },
  {
    key: "recipeShowAssets",
    label: i18n.t("group.show-recipe-assets"),
    description: i18n.t("group.show-recipe-assets-description"),
  },
  {
    key: "recipeLandscapeView",
    label: i18n.t("group.default-to-landscape-view"),
    description: i18n.t("group.default-to-landscape-view-description"),
  },
  {
    key: "recipeDisableComments",
    label: i18n.t("group.disable-users-from-commenting-on-recipes"),
    description: i18n.t("group.disable-users-from-commenting-on-recipes-description"),
  },
];

const allDays = [
  {
    name: i18n.t("general.sunday"),
    value: 0,
  },
  {
    name: i18n.t("general.monday"),
    value: 1,
  },
  {
    name: i18n.t("general.tuesday"),
    value: 2,
  },
  {
    name: i18n.t("general.wednesday"),
    value: 3,
  },
  {
    name: i18n.t("general.thursday"),
    value: 4,
  },
  {
    name: i18n.t("general.friday"),
    value: 5,
  },
  {
    name: i18n.t("general.saturday"),
    value: 6,
  },
];
</script>

<style lang="css">
.preference-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 600px;
}
</style>
