<script setup lang="ts">
    import TimesheetApprovalEmployeeOverviewList from '../components/timesheet-approval-employee-overview-list.vue';
    import { computed } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { date } from 'quasar';

    const { locale } = useI18n();
    const timesheet_store = useTimesheetStore();
    const date_options: Intl.DateTimeFormatOptions = {
        day: 'numeric',
        month: "long",
        year: 'numeric',
     };

    const pay_period_label = computed(() => {
        const dates = timesheet_store.current_pay_period.label.split('.');
        const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
        const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));

        if ( dates.length === 1 ) {
            return {
                start_date: '—',
                end_date: '—'
            }
        }

        return { start_date, end_date };
    });
</script>

<template>
    <q-page 
        padding 
        class="q-pa-md bg-secondary"
    >
        <div class="text-h4 row justify-center text-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
            {{ $t('pageTitles.timeSheetValidations') }}
        </div>
        <div class="row items-center justify-center q-py-none q-my-none">
            <div 
                class="text-primary text-uppercase text-weight-bold"
                :class="$q.screen.lt.md ? '' : 'text-h6'"
            >
                {{ pay_period_label.start_date }}
            </div>
            <div 
                class="text-grey-8 text-uppercase q-mx-md"
                :class="$q.screen.lt.md ? 'text-weight-medium text-caption' : 'text-weight-bold'"
            >
                {{ $t('timeSheet.dateRangesTo') }}
            </div>
            <div 
                class="text-primary text-uppercase text-center text-weight-bold"
                :class="$q.screen.lt.md ? '' : 'text-h6'"
            >
                {{ pay_period_label.end_date }}
            </div>
        </div>

        <TimesheetApprovalEmployeeOverviewList />
    </q-page>
</template>