<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { date } from 'quasar';
import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import useWeekdaysOrder from 'src/composables/getWeekdays';

const formatDate = (dateToFormat, format = 'YYYY-MM-DD') =>
    date.formatDate(dateToFormat, format);

const props = defineProps({
    year: {
        type: Number,
        required: true,
    },
    month: {
        type: Number,
        required: true,
    },
    monthDate: {
        type: Object,
        default: null,
    },
    daysMap: {
        type: Object,
        default: null,
    },
});

const emit = defineEmits(['onDateSelected']);

const { locale } = useI18n();
const weekdayStore = useWeekdayStore();
const weekDays = useWeekdaysOrder();
const calendarRef = ref(null);
const today = ref(formatDate(Date.vnNew()));
const todayTimestamp = computed(() => {
    const date = Date.vnNew();
    date.setHours(0, 0, 0, 0);
    return date.getTime();
});
const _monthDate = computed(() => formatDate(props.monthDate));

const calendarHeaderTitle = computed(() => {
    return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
});

const isToday = (timestamp) => {
    const { year, month, day } = timestamp;
    return todayTimestamp.value === new Date(year, month - 1, day).getTime();
};

const getEventByTimestamp = ({ year, month, day }) => {
    const stamp = new Date(year, month - 1, day).getTime();
    return props.daysMap?.[stamp] || null;
};

const handleDateClick = (timestamp) => {
    const event = getEventByTimestamp(timestamp);
    const { year, month, day } = timestamp;
    const date = new Date(year, month - 1, day);
    emit('onDateSelected', {
        date,
        isNewMode: !event,
        event: event?.[0] || null,
    });
};

const getEventAttrs = (timestamp) => {
    return {
        class: '--event',
        label: timestamp.day,
    };
};

defineExpose({ getEventByTimestamp, handleDateClick });
</script>

<template>
    <QCalendarMonthWrapper
        style="height: 290px; width: 290px"
        transparent-background
        view-customization="workerCalendar"
    >
        <template #header>
            <span class="full-width text-center text-body1 q-py-sm">{{
                calendarHeaderTitle
            }}</span>
        </template>
        <template #calendar>
            <QCalendarMonth
                ref="calendarRef"
                :model-value="_monthDate"
                show-work-weeks
                no-outside-days
                no-active-date
                :weekdays="weekDays"
                short-weekday-label
                :locale="locale"
                :now="today"
                @click-date="handleDateClick($event.scope.timestamp)"
                mini-mode
            >
                <template #day="{ scope: { timestamp } }">
                    <slot
                        name="day"
                        :timestamp="timestamp"
                        :getEventAttrs="getEventAttrs"
                    >
                        <QBtn
                            v-if="getEventByTimestamp(timestamp)"
                            v-bind="{ ...getEventAttrs(timestamp) }"
                            @click="handleDateClick(timestamp)"
                            rounded
                            dense
                            flat
                            class="calendar-event"
                            :class="{ '--today': isToday(timestamp) }"
                        />
                    </slot>
                </template>
            </QCalendarMonth>
        </template>
    </QCalendarMonthWrapper>
</template>

<style lang="scss">
.calendar-event {
    display: flex;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    line-height: 1.715em;
    cursor: pointer;
    color: white;

    &.--today {
        border: 2px solid $info;
    }

    &.--event {
        background-color: $positive;
        color: black;
    }

    &:hover {
        opacity: 0.8;
    }
}
</style>
