<script setup lang="ts">
    import TimesheetApprovalEmployeeDetailsShiftsRow from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue';
    import TimesheetApprovalEmployeeDetailsShiftsRowHeader from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue';
    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
    import type { Shift } from 'src/modules/timesheets/types/shift.interfaces';
    import { default_shift } from 'src/modules/timesheets/types/shift.defaults';

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

    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>
    <div 
        v-for="week, index in props.rawData"
        :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"
        >
            <q-card-section class="col-auto q-pa-xs text-white">
                <div 
                    class="bg-primary rounded-10 q-pa-xs text-center" 
                    :style="$q.screen.lt.md ? '' : 'width: 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: 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>
            <q-card-section class="col q-pa-none">
                <TimesheetApprovalEmployeeDetailsShiftsRowHeader />
                <TimesheetApprovalEmployeeDetailsShiftsRow
                    v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
                    :key="shift_index" 
                    :shift="shift"
                />
            </q-card-section>
            <q-card-section class="q-pr-xs col-auto">
                <q-btn
                    push
                    color="primary"
                    icon="more_time"
                    class="q-pa-sm"
                />
            </q-card-section>
        </q-card>
    </div>
</template>