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

    const expense_store = useExpensesStore();
</script>

<template>
    <q-dialog
        v-model="expense_store.is_open"
        persistent
        transition-show="jump-down"
        transition-hide="jump-down"
    >
        <q-card
            class="q-pa-none rounded-10 shadow-10"
            :class="$q.screen.lt.md ? ' bg-primary' : '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">
                <!-- <q-banner 
                    v-if="expenses_error"
                    dense
                    class="bg-red-2 col-auto text-negative q-mt-sm"
                >
                    {{ expenses_error }}
                </q-banner> -->

                <ExpenseDialogHeader />

                <ExpenseDialogList />

                <q-separator v-if="$q.screen.lt.md" spaced color="accent" size="2px" class="q-mx-md" />

                <q-slide-transition @hide="expense_store.is_hiding_create_form = true" :duration="200">
                    <div v-if="!expense_store.current_expense.is_approved && expense_store.mode !== 'update' && expense_store.is_hiding_create_form === false">
                        <ExpenseDialogFormMobile v-if="$q.screen.lt.md" />
                        <ExpenseDialogForm v-else/>
                    </div>
                </q-slide-transition>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>