<script
    setup
    lang="ts"
>
    import { date } from 'quasar';
    import ShiftListHeader from 'src/modules/timesheets/components/shift/shift-list-header.vue';
    import ShiftListRow from 'src/modules/timesheets/components/shift/shift-list-row.vue';
    import ShiftListLegend from 'src/modules/timesheets/components/shift/shift-list-legend.vue';
    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
    import { useShiftStore } from 'src/stores/shift-store';
    import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
    import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
    import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';

    const props = defineProps<{
        rawData: PayPeriodDetails;
        currentPayPeriod: PayPeriod;
    }>();

    const timesheet_api = useTimesheetApi();
    const { openCreate, openDelete, openUpdate } = useShiftStore();

    const get_date_from_short = (short_date: string): Date => {
        return new Date(props.currentPayPeriod.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(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
    };
</script>

<template>
    <!-- shift's colored legend -->
    <ShiftListLegend :is-loading="false" />

    <div
        v-for="week, index in props.rawData.weeks"
        :key="index"
        class="q-px-xs q-pt-xs rounded-5 col"
    >
        <q-card
            v-for="day, day_index in week.shifts"
            :key="day_index"
            flat
            bordered
            class="row items-center rounded-10 q-mb-xs"
        >

            <!-- Dates column -->
            <q-card-section class="col-auto q-pa-xs text-white">
                <div class="bg-primary rounded-10 q-pa-xs text-center">
                    <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: 2.5em; 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 />
                <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)"
                />
            </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>