<script
    setup
    lang="ts"
>
    import { computed } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import ExpenseDialogListItem from 'src/modules/timesheets/components/expense-dialog-list-item.vue';
    import ExpenseDialogListItemMobile from 'src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue';

    const timesheet_store = useTimesheetStore();

    const { horizontal = false } = defineProps<{
        horizontal?: boolean;
    }>();

    const expenses_list = computed(() => {
        if (timesheet_store.timesheets !== undefined) {
            return timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
        }
        return [];
    })
</script>

<template>
    <!-- liste des dépenses pré existantes -->
    <q-list
        padding
        class="q-px-lg"
        :class="horizontal ? 'row flex-center' : ''"
    >
        <q-item-label
            v-if="expenses_list.length < 1"
            class="text-italic text-center q-pa-sm rounded-4"
        >
            <q-separator spaced />
            {{ $t('timesheet.expense.empty_list') }}
            <q-separator spaced />
        </q-item-label>

        <div
            v-for="(expense, index) in expenses_list"
            :key="index"
        >
            <ExpenseDialogListItemMobile
                v-if="$q.screen.lt.md"
                v-model="expense.is_approved"
                :index="index"
                :expense="expense"
                :horizontal="horizontal"
            />

            <ExpenseDialogListItem
                v-else
                v-model="expense.is_approved"
                :index="index"
                :expense="expense"
                :horizontal="horizontal"
            />
        </div>
    </q-list>
</template>