<script setup lang="ts">
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";

const store = useSettingsStore();
const confirmationModal = useConfirmationModal();

const BIRTHDAY_DAY = 25;
const BIRTHDAY_MONTH = 4;
const BIRTHDAY_YEAR = 2002;

const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");

const animateIntro = async () => {
  await Promise.all([
    monthRef.value?.animateIntro(),
    dayRef.value?.animateIntro(),
    yearRef.value?.animateIntro(),
  ]);
};

const animateOutro = async () => {
  await Promise.all([
    monthRef.value?.animateOutro(),
    dayRef.value?.animateOutro(),
    yearRef.value?.animateOutro(),
  ]);
};

onMounted(() => {
  animateIntro();
});

const handleActivateB = async () => {
  await animateOutro();
  store.closeSubMenu();
};

const handleActivateA = () => {
  const today = new Date();
  const currentYear = today.getFullYear();

  const isBirthdayToday =
    today.getMonth() === BIRTHDAY_MONTH - 1 && today.getDate() === BIRTHDAY_DAY;

  let text: string;
  if (isBirthdayToday) {
    text = $t("settings.user.birthday.confirmation.today");
  } else {
    let nextBirthday = new Date(currentYear, BIRTHDAY_MONTH - 1, BIRTHDAY_DAY);
    if (nextBirthday < today) {
      nextBirthday = new Date(
        currentYear + 1,
        BIRTHDAY_MONTH - 1,
        BIRTHDAY_DAY,
      );
    }

    const diffTime = nextBirthday.getTime() - today.getTime();
    const daysUntilBirthday = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    text = $t("settings.user.birthday.confirmation.future", {
      days: daysUntilBirthday,
    });
  }

  confirmationModal.open({
    text,
    onClosed: async () => {
      await animateOutro();
      store.closeSubMenu();
    },
    timeout: 2000,
  });
};

defineOptions({ render: () => null });
</script>

<template>
  <!-- date format may change based on the language (d/m/y is superior btw) -->
  <NumberInput
    ref="month"
    :model-value="BIRTHDAY_MONTH"
    :title="$t('settings.user.birthday.month')"
    :x="1 * 16"
    :disabled="true"
  />
  <NumberInput
    ref="day"
    :model-value="BIRTHDAY_DAY"
    :title="$t('settings.user.birthday.day')"
    :x="5 * 16"
    :disabled="true"
  />
  <NumberInput
    ref="year"
    :model-value="BIRTHDAY_YEAR"
    :title="$t('settings.user.birthday.year')"
    :digits="4"
    :x="9 * 16"
    :disabled="true"
  />

  <CommonButtons
    :y-offset="0"
    :b-label="$t('common.cancel')"
    :a-label="$t('common.confirm')"
    @activate-b="handleActivateB"
    @activate-a="handleActivateA"
  />
</template>
