<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 = true"
            :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>
        </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>

    <!-- date picker calendar -->
    <q-dialog 
        v-model="is_showing_calendar_picker"
        transition-show="jump-down"
        transition-hide="jump-up"
        position="top">
        <q-date 
            v-model="calendar_date"
            color="primary"
            class="q-mt-xl"
            today-btn
            mask="YYYY-MM-DD"
            :options="date => date >= PAY_PERIOD_DATE_LIMIT"
            @update:model-value="onDateSelected"
        />
    </q-dialog>
</template>