<script
    setup
    lang="ts"
>
    import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
    import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';
    import ExpenseDialogHeader from 'src/modules/timesheets/components/expense-dialog-header.vue';
    import ExpenseDialogFormMobile from 'src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue';

    import { date } from 'quasar';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { Expense } from 'src/modules/timesheets/models/expense.models';

    const expense_store = useExpensesStore();

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

    const onClickExpenseCreate = () => {
        expense_store.mode = 'create';
        expense_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
    }
</script>

<template>
    <q-dialog
        v-model="expense_store.is_open"
        persistent
        :full-width="$q.platform.is.mobile"
        backdrop-filter="blur(6px)"
        transition-show="jump-down"
        transition-hide="jump-down"
    >
        <q-card
            class="q-pa-none rounded-10 shadow-24 bg-secondary"
            style=" min-width: 70vw;"
            :style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
        >
            <q-inner-loading :showing="expense_store.is_loading">
                <q-spinner size="32px" />
            </q-inner-loading>

            <q-card-section class="q-pa-none">
                <ExpenseDialogHeader />

                <ExpenseDialogList />

                <q-expansion-item
                    v-if="!isApproved"
                    v-model="expense_store.is_showing_create_form"
                    hide-expand-icon
                    :dense="!$q.platform.is.mobile"
                    group="expenses"
                    @show="onClickExpenseCreate()"
                    header-class="bg-accent text-white"
                >
                    <template #header>
                        <div class="row items-center">
                            <q-icon
                                name="add_circle_outline"
                                size="md"
                                class="col-auto"
                                :class="expense_store.is_showing_create_form ? 'invisible' : ''"
                            />
                        
                            <span class="col-auto text-uppercase text-weight-bold text-h6 q-ml-xs q-mr-sm">
                                {{ $t('timesheet.expense.add_expense') }}
                            </span>
                        </div>
                    </template>

                    <ExpenseDialogFormMobile v-if="$q.platform.is.mobile" />

                    <ExpenseDialogForm v-else />
                </q-expansion-item>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>