<script setup lang="ts">
import { computed } from 'vue';
import type { CreateShiftPayload, Shift } from '../../types/shift.interfaces';

/* eslint-disable */
const props = defineProps<{
    rows:       Shift[];
    week_dates: string[];
}>();

const emit = defineEmits<{
    (e: 'save', payload: CreateShiftPayload[]): void;
}>();

const buildPayload = (): CreateShiftPayload[] => {
    const dates = props.week_dates;
    if(!Array.isArray(dates) || dates.length === 0) return [];

    return props.rows.flatMap((row, idx) => {
        const date = dates[idx];
        const has_data = !!(row.type || row.start_time || row.end_time || row.comment);
        if(!date || !has_data) return [];

        const item: CreateShiftPayload = {
            date,
            type: row.type,
            start_time: row.start_time,
            end_time: row.end_time,
            is_remote: row.is_remote,
        };
        if(row.comment) item.comment = row.comment;
        return[item];
    })
};

const payload = computed(buildPayload);
const canSave = computed(()=> payload.value.length > 0);

const saveWeek = () => {
    emit('save', payload.value);
}

</script>

<template>
        <!-- save button -->
        <q-btn
            color="primary"
            icon="save_alt"
            class="col-1"
            push
            rounded
            :disable="!canSave"
            @click="saveWeek"        
        >
            <q-tooltip
                anchor="top middle"
                self="center middle"
                class="bg-primary text-uppercase text-weight-bold"
            >{{ $t('timesheet.save_button') }}
            </q-tooltip>
        </q-btn>
</template>