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


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

    const timesheet_label = computed(() => {
        const dates = timeSheet_store.current_timesheet.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 q-mt-lg text-uppercase text-weight-bolder text-gray-8">
            {{ $t('pageTitles.timeSheets') }}
        </div>
            <div class="row items-center justify-center q-py-none q-my-none">
                <div class="text-primary text-h6 text-uppercase">
                    {{ timesheet_label.start_date }}
                </div>
                <div class="text-primary text-h6 text-uppercase">
                    {{ $t('timeSheet.dateRangesTo') }}
                </div>
                <div class="text-primary text-h6 text-uppercase">
                    {{ timesheet_label.end_date }}
                </div>
            </div>

            <!-- insert here TimesheetTemp -->
    </q-page>
</template>