<template>
    <vue-date-picker inline auto-apply
                     model-type="yyyy-MM-dd"
                     :class="`transaction-calendar ${calendarClass}`"
                     :config="{ noSwipe: true }"
                     :readonly="readonly"
                     :dark="isDarkMode"
                     :enable-time-picker="false"
                     :clearable="false"
                     :day-names="dayNames"
                     :week-start="firstDayOfWeek"
                     :min-date="minDate"
                     :max-date="maxDate"
                     :disabled-dates="noTransactionInMonthDay"
                     :prevent-min-max-navigation="true"
                     :hide-offset-dates="true"
                     :disable-month-year-select="true"
                     :month-change-on-scroll="false"
                     :month-change-on-arrows="false"
                     v-model="dateTime">
        <template #day="{ day, date }">
            <div class="transaction-calendar-daily-amounts">
                <span :class="dayHasTransactionClass && dailyTotalAmounts && dailyTotalAmounts[day] ? dayHasTransactionClass : undefined">{{ getDisplayDay(date) }}</span>
                <span class="transaction-calendar-daily-amount text-income" v-if="dailyTotalAmounts && dailyTotalAmounts[day] && dailyTotalAmounts[day].income">{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].income, defaultCurrency, '', dailyTotalAmounts[day].incompleteIncome) }}</span>
                <span class="transaction-calendar-daily-amount text-expense" v-if="dailyTotalAmounts && dailyTotalAmounts[day] && dailyTotalAmounts[day].expense">{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].expense, defaultCurrency, '', dailyTotalAmounts[day].incompleteExpense) }}</span>
            </div>
        </template>
    </vue-date-picker>
</template>

<script setup lang="ts">
import { computed, } from 'vue';
import { useI18n } from '@/locales/helpers.ts';

import { useUserStore } from '@/stores/user.ts';
import type { TransactionTotalAmount } from '@/stores/transaction.ts';

import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
import { INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numeral.ts';

import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
import {
    getTimezoneOffsetMinutes,
    getBrowserTimezoneOffsetMinutes,
    getUnixTimeFromLocalDatetime,
    getActualUnixTimeForStore,
    getYearMonthDayDateTime,
    parseDateTimeFromUnixTime
} from '@/lib/datetime.ts';

const props = defineProps<{
    modelValue: TextualYearMonthDay | '';
    isDarkMode: boolean;
    defaultCurrency: string | false;
    minDate: Date;
    maxDate: Date;
    weekDayNameType?: 'long' | 'short';
    dailyTotalAmounts?: Record<string, TransactionTotalAmount>;
    readonly?: boolean;
    calendarClass?: string;
    dayHasTransactionClass?: string;
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void;
}>();

const {
    getAllLongWeekdayNames,
    getAllShortWeekdayNames,
    getCalendarDayOfMonthFromUnixTime,
    formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();

const userStore = useUserStore();

const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(props.weekDayNameType === 'short' ? getAllShortWeekdayNames() : getAllLongWeekdayNames(), firstDayOfWeek.value));
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);

const dateTime = computed<TextualYearMonthDay | ''>({
    get: () => props.modelValue,
    set: (value: TextualYearMonthDay | '') => emit('update:modelValue', value)
});

function noTransactionInMonthDay(date: Date): boolean {
    const dateTime = parseDateTimeFromUnixTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
    return !props.dailyTotalAmounts || !props.dailyTotalAmounts[dateTime.getGregorianCalendarDay()];
}

function getDisplayMonthTotalAmount(amount: number, currency: string | false, symbol: string, incomplete: boolean): string {
    const displayAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
    return symbol + displayAmount + (incomplete ? INCOMPLETE_AMOUNT_SUFFIX : '');
}

function getDisplayDay(date: Date): string {
    return getCalendarDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
}
</script>

<style>
.transaction-calendar-daily-amounts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.transaction-calendar .dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
