<script
    setup
    lang="ts"
>
    import { computed, ref } from 'vue';
    import { date } from 'quasar';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const NEXT = 1;
    const PREVIOUS = -1;
    const PAY_PERIOD_DATE_LIMIT = '2023/12/17';

    const timesheet_store = useTimesheetStore();

    const is_showing_calendar_picker = ref(false);
    const calendar_date = ref(date.formatDate(Date.now(), 'YYYY-MM-DD'));
    const is_disabled = computed(() => timesheet_store.pay_period === undefined);

    const emit = defineEmits<{
        'date-selected': [value: string]
        'pressed-previous-button': []
        'pressed-next-button': []
    }>();

    const is_previous_pay_period_limit = computed(() =>
        (timesheet_store.pay_period?.pay_year === 2024 &&
            timesheet_store.pay_period?.pay_period_no <= 1) ?? false
    );

    const onDateSelected = (value: string) => {
        calendar_date.value = value;
        is_showing_calendar_picker.value = false;
        emit('date-selected', value);
    };

    const getNextOrPreviousPayPeriod = (direction: number) => {
        const pay_period = timesheet_store.pay_period;
        if (!pay_period) return;

        pay_period.pay_period_no += direction;

        if (pay_period.pay_period_no > 26) {
            pay_period.pay_period_no = 1;
            pay_period.pay_year += direction;
        }

        if (pay_period.pay_period_no < 1) {
            pay_period.pay_period_no = 26;
            pay_period.pay_year += direction;
        }
    };

    const getNextPayPeriod = () => {
        getNextOrPreviousPayPeriod(NEXT);
        emit('pressed-next-button');
    }

    const getPreviousPayPeriod = () => {
        getNextOrPreviousPayPeriod(PREVIOUS);
        emit('pressed-previous-button');
    };
</script>

<template>
    <div class="row">
        <!-- navigation to previous week -->
        <q-btn
            push
            rounded
            icon="keyboard_arrow_left"
            color="accent"
            @click="getPreviousPayPeriod"
            :disable="is_previous_pay_period_limit || timesheet_store.is_loading || is_disabled"
            class="q-mr-sm q-px-sm"
        >
            <q-tooltip
                anchor="top middle"
                self="center middle"
                class="bg-primary text-uppercase text-weight-bold"
            >
                {{ $t('timesheet.nav_button.previous_week') }}
            </q-tooltip>
        </q-btn>

        <!-- navigation through calendar date picker -->
        <q-btn
            push
            rounded
            icon="calendar_month"
            color="accent"
            @click="is_showing_calendar_picker = !is_showing_calendar_picker"
            :disable="timesheet_store.is_loading || is_disabled"
            class="q-px-xl"
        >
            <q-tooltip
                anchor="top middle"
                self="center middle"
                class="bg-primary text-uppercase text-weight-bold"
            >
                {{ $t('timesheet.nav_button.calendar_date_picker') }}
            </q-tooltip>

            <!-- date picker calendar -->
            <q-menu
                v-model="is_showing_calendar_picker"
                no-parent-event
                anchor="bottom middle"
                self="top middle"
                :offset="[0, 10]"
                class="shadow-24"
            >
                <q-date
                    v-model="calendar_date"
                    color="primary"
                    today-btn
                    mask="YYYY-MM-DD"
                    :options="date => date >= PAY_PERIOD_DATE_LIMIT"
                    @update:model-value="onDateSelected"
                />
            </q-menu>
        </q-btn>

        <!-- navigation to next week -->
        <q-btn
            push
            rounded
            icon="keyboard_arrow_right"
            color="accent"
            @click="getNextPayPeriod"
            :disable="timesheet_store.is_loading || is_disabled"
            class="q-ml-sm q-px-sm"
        >
            <q-tooltip
                anchor="top middle"
                self="center middle"
                class="bg-primary text-uppercase text-weight-bold"
            > {{ $t('timesheet.nav_button.next_week') }}
            </q-tooltip>
        </q-btn>
    </div>
</template>