<script
    setup
    lang="ts"
>
    import { computed } from 'vue';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const timesheet_store = useTimesheetStore();
    const expense_store = useExpensesStore();
    const weekly_totals = computed(() => {
        let expenses = 0;
        let mileage = 0;
        timesheet_store.timesheets.forEach(timesheet => {
            expenses += timesheet.weekly_expenses.expenses ?? 0;
            mileage += timesheet.weekly_expenses.mileage ?? 0;
        });

        return { expenses, mileage };
    });
</script>

<template>
    <div class="column items-center q-pa-none">
        <div class="col row full-width">
            <q-item-label class="col text-h6 text-weight-bolder text-uppercase q-py-sm q-px-md">
                {{ $t('timesheet.expense.title') }}
            </q-item-label>

            <q-space />

            <q-btn
                square
                icon="clear"
                color="negative"
                class="col-auto"
                style="border-radius: 0 5px 0 10px;"
                @click="expense_store.close"
            />
        </div>

        <div class="col column items-end full-width q-pt-sm q-px-md">
            <div class="col-auto row items-center q-px-sm">
                <span
                    v-if="$q.screen.gt.sm"
                    class="col-auto text-uppercase text-weight-light text-accent q-mr-xs"
                >
                    {{ $t('timesheet.expense.total_amount') }} :
                </span>

                <span
                    class="col-auto text-weight-light"
                    style="font-size: 2.5em; line-height: 1em;"
                >
                    {{ weekly_totals.expenses.toFixed(2) }}
                </span>

                <q-icon
                    v-if="$q.screen.lt.md"
                    name="attach_money"
                    size="md"
                    color="accent"
                    class="col q-ml-sm"
                />
            </div>

            <div class="col-auto row items-center q-px-sm">
                <span
                    v-if="$q.screen.gt.sm"
                    class="col text-uppercase text-weight-light text-accent q-mr-xs"
                >
                    {{ $t('timesheet.expense.total_mileage') }} :
                </span>

                <span
                    class="col-auto text-weight-light"
                    style="font-size: 2.5em; line-height: 1em;"
                >
                    {{ weekly_totals.mileage.toFixed(1) }}
                </span>
                
                <q-icon
                    v-if="$q.screen.lt.md"
                    name="commute"
                    size="md"
                    color="accent"
                    class="col q-ml-sm"
                />
            </div>
        </div>
    </div>
</template>