<script setup lang="ts">
import { default_shift, type Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pay-period-details-overview-interface';
import TimesheetDetailsShiftsRowHeader from './timesheet-details-shifts-row-header.vue';
import TimesheetDetailsShiftsRow from './timesheet-details-shifts-row.vue';
import { date } from 'quasar';

    const props = defineProps<{
        rawData: TimesheetPayPeriodDetailsOverview;
        currentPayPeriod: PayPeriod;
    }>();
    
    const emit = defineEmits<{
        'request-add'    : [payload: { date: string }];
        'request-edit'   : [payload: { date: string; shift: Shift }];
        'request-delete' : [payload: { date: string; shift: Shift }];
        // 'save-comment'   : [payload: { date: string; shift: Shift; comment: string }];
    }>();

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

    const on_request_add    = (iso_date: string)                                => emit('request-add',    { date: iso_date });
    const on_request_edit   = (iso_date: string, shift: Shift)                  => emit('request-edit',   { date: iso_date, shift });
    const on_request_delete = (iso_date: string, shift: Shift)                  => emit('request-delete', { date: iso_date, shift });
    // const on_save_comment   = (iso_date: string, shift: Shift, comment: string) => emit('save-comment',   { date: iso_date, shift, comment });

</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"
        >
            <!-- 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">
                <TimesheetDetailsShiftsRowHeader />
                <TimesheetDetailsShiftsRow
                    v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
                    :key="shift_index" 
                    :shift="shift"
                    @request-edit="  ({ shift })           => on_request_edit(to_iso_date(day.short_date), shift )"
                    @request-delete="({ shift })           => on_request_delete(to_iso_date(day.short_date), shift )"
                />
            </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="on_request_add(to_iso_date(day.short_date))"
                />
            </q-card-section>
        </q-card>
    </div>
</template>