<script
    setup
    lang="ts"
>
    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
    import { expenseTypeIcon } from 'src/modules/timesheets/utils/expense.util';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
    import { default_expense, type Expense } from 'src/modules/timesheets/models/expense.models';
    import { computed, inject } from 'vue';

    const timesheet_store = useTimesheetStore();
    const expenses_store = useExpensesStore();
    const expenses_api = useExpensesApi();

    const expenses_list = computed(() => timesheet_store.pay_period_details.weeks.flatMap(week =>
        Object.values(week.expenses).flatMap(day => day.expenses)));

    const employee_email = inject('employeeEmail', '');

    const setExpenseToModify = (expense: Expense) => {
        expenses_store.mode = 'update';
        expenses_store.current_expense = expense;
        expenses_store.initial_expense = unwrapAndClone(expense);
    };

    const requestExpenseDeletion = async (expense: Expense) => {
        expenses_store.mode = 'delete';
        expenses_store.initial_expense = expense;
        expenses_store.current_expense = default_expense;
        await expenses_api.deleteExpenseByEmployeeEmail(employee_email, expenses_store.initial_expense.date);
    }
</script>

<template>
    <!-- liste des dépenses pré existantes -->
    <q-list
        padding
        class="rounded-borders"
    >
        <q-item-label
            v-if="expenses_store.pay_period_expenses.expenses.length === 0"
            class="text-italic q-px-sm"
        >
            {{ $t('timesheet.expense.empty_list') }}
        </q-item-label>
        <q-item
            style="border: solid 1px lightgrey; border-radius: 7px;"
            v-for="(expense, index) in expenses_list"
            :key="index"
            class="q-my-xs shadow-1"
            :class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
        >
            <!-- avatar type icon section -->
            <q-item-section avatar>
                <q-icon
                    :name="expenseTypeIcon(expense.type)"
                    color="primary"
                />
            </q-item-section>

            <!-- amount or mileage section -->
            <q-item-section top>
                <q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
                    <template v-if="typeof expense.mileage === 'number'">
                        {{ expense.mileage?.toFixed(1) }} km
                    </template>
                    <template v-else>
                        {{ expense.amount.toFixed(2) }} $
                    </template>
                </q-item-label>
                <q-item-label v-else>
                    {{ expense.amount.toFixed(2) }} $
                </q-item-label>

                <!-- date label -->
                <q-item-label
                    caption
                    lines="2"
                >
                    {{ $d(new Date(expense.date), { year: 'numeric', month: 'short', day: 'numeric', weekday: 'short' })
                    }}
                </q-item-label>
            </q-item-section>

            <!-- attachment file icon -->
            <q-item-section side>
                <q-btn
                    push
                    dense
                    size="md"
                    color="primary"
                    class="q-mx-lg"
                    icon="attach_file"
                />
            </q-item-section>

            <!-- comment section -->
            <q-item-section top>
                <q-item-label lines="1">
                    {{ $t('timesheet.expense.employee_comment') }}
                </q-item-label>
                <q-item-label
                    caption
                    lines="2"
                >
                    {{ expense.comment }}
                </q-item-label>
            </q-item-section>

            <!-- supervisor comment section -->
            <q-item-section top>
                <q-item-label lines="1">
                    {{ $t('timesheet.expense.supervisor_comment') }}
                </q-item-label>
                <q-item-label
                    v-if="expense.supervisor_comment"
                    caption
                    lines="2"
                >
                    {{ expense.supervisor_comment }}
                </q-item-label>
            </q-item-section>

            <q-item-section
                v-if="!expenses_store.pay_period_expenses.is_approved && !expense.is_approved"
                side
            >
                <q-btn
                    push
                    dense
                    size="xs"
                    color="primary"
                    icon="edit"
                    @click="setExpenseToModify(expense)"
                />

                <q-btn
                    push
                    dense
                    size="xs"
                    color="negative"
                    icon="close"
                    @click="requestExpenseDeletion(expense)"
                />
            </q-item-section>
        </q-item>
    </q-list>

</template>