<script
    setup
    lang="ts"
>
    import ShiftListDayRow from 'src/modules/timesheets/components/shift-list-day-row.vue';
    import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
    import type { Shift } from 'src/modules/timesheets/models/shift.models';
    import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';

    const shift_api = useShiftApi();

    const { day, dense = false, outlined = false, approved = false } = defineProps<{
        day: TimesheetDay;
        dense?: boolean;
        outlined?: boolean;
        approved?: boolean;
    }>();

    const emit = defineEmits<{
        'deleteUnsavedShift': [void];
    }>();

    const deleteCurrentShift = async (shift: Shift) => {
        if (shift.id <= 0) {
            shift.id = 0;
            emit('deleteUnsavedShift');
            return;
        }
        await shift_api.deleteShiftById(shift.id);
    };
</script>

<template>
    <div class="column justify-center q-py-xs" :class="approved ? '' : ''">
            <ShiftListDayRow
                v-for="shift, shift_index in day.shifts"
                :key="shift_index"
                v-model:shift="day.shifts[shift_index]!"
                :outlined="outlined"
                :dense="dense"
                :has-shift-after="shift_index < day.shifts.length - 1"
                @request-delete="deleteCurrentShift(shift)"
            />
    </div>
</template>