<script
    setup
    lang="ts"
>
    import { date } from 'quasar';
    import ShiftListHeader from 'src/modules/timesheets/components/shift-list-header.vue';
    import ShiftListRow from 'src/modules/timesheets/components/shift-list-row.vue';
    import { useShiftStore } from 'src/stores/shift-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
import { computed } from 'vue';

    const timesheet_store = useTimesheetStore();
    const { openCreate, openDelete, openUpdate } = useShiftStore();
    const { dense = false } = defineProps<{
        dense?: boolean;
    }>();

    const font_size = computed(() => dense ? '1.5em' : '2.5em')

    const get_date_from_short = (short_date: string): Date => {
        return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + short_date);
    };

    const to_iso_date = (short_date: string): string => {
        return date.formatDate(get_date_from_short(short_date), 'YYYY-MM-DD');
    };

    const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
        return shifts.length > 0 ? shifts : [default_shift];
    };

    const getDate = (shift_date: string): Date => {
        return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + shift_date);
    };
</script>

<template>
    <div
        v-for="week, index in timesheet_store.pay_period_details.weeks"
        :key="index"
        class="col q-px-xs q-pt-xs q-mx-sm rounded-5"
    >
        <q-card
            v-for="day, day_index in week.shifts"
            :key="day_index + index"
            class="row items-center rounded-10 q-mb-xs"
        >

            <!-- Dates column -->
            <q-card-section class="col-auto q-pa-xs text-white q-mr-md">
                <div
                    class="bg-primary rounded-10 q-pa-xs text-center"
                    :style="'width: ' + dense? '60px' : '75px;'"
                >
                    <q-item-label
                        style="font-size: 0.7em;"
                        class="text-uppercase"
                    >{{ $d(getDate(day.short_date), { weekday: $q.screen.lt.md ? 'short' : 'long' }) }}</q-item-label>
                    <q-item-label
                        class="text-weight-bolder"
                        :style="'font-size: ' + font_size + '; line-height: 90% !important;'"
                    >{{ day.short_date.split('/')[1] }}</q-item-label>
                    <q-item-label
                        style="font-size: 0.7em;"
                        class="text-uppercase"
                    >{{ $d(getDate(day.short_date), { month: $q.screen.lt.md ? 'short' : 'long' }) }}</q-item-label>
                </div>
            </q-card-section>

            <!-- List of shifts column -->
            <q-card-section class="col q-pa-none">
                <ShiftListHeader v-if="day.shifts.length > 0"/>
                <div
                    v-if="day.shifts.length > 0"
                >
                    <ShiftListRow
                        v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
                        :key="shift_index"    
                        :shift="shift"
                        @request-update="value => openUpdate(to_iso_date(day.short_date), value)"
                        @request-delete="value => openDelete(to_iso_date(day.short_date), value)"
                    />
                </div>
            </q-card-section>
            <!-- add shift btn column -->
            <q-card-section class="q-pr-xs col-auto">
                <q-btn
                    push
                    color="primary"
                    icon="more_time"
                    class="q-pa-sm"
                    @click="openCreate(to_iso_date(day.short_date))"
                />
            </q-card-section>
        </q-card>
    </div>
</template>