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

    const timesheet_store = useTimesheetStore();

    const is_showing_calendar_picker = ref(false);
    const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' ));
    
    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
    );

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

<template>
    <div class="row" >
        <!-- navigation to previous week -->
        <q-btn 
            push rounded
            icon="keyboard_arrow_left"
            color="primary"
            @click="emit('pressed-previous-button')"
            :disable="is_previous_pay_period_limit || timesheet_store.is_loading"
            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="primary"
            @click="is_showing_calendar_picker = true"
            :disable="timesheet_store.is_loading"
            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="primary"
            @click="emit('pressed-next-button')"
            :disable="timesheet_store.is_loading"
            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 > '2023/12/16'"
            @update:model-value="onDateSelected"
        />
    </q-dialog>
</template>