<script
    setup
    lang="ts"
>
    import { date } from 'quasar';
    import { computed, ref, toRaw } from 'vue';
    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
    import { deepEqual } from 'src/utils/deep-equal';
    import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { getExpenseIcon } from 'src/modules/timesheets/utils/expense.util';
    import { useAuthStore } from 'src/stores/auth-store';
    import { CAN_APPROVE_PAY_PERIODS } from 'src/modules/shared/models/user.models';
    import { Expense } from 'src/modules/timesheets/models/expense.models';
    import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';

    const { expense, horizontal = false } = defineProps<{
        expense: Expense;
        index: number;
        horizontal?: boolean;
    }>();
    const is_approved = defineModel<boolean>({ required: true });

    const expenses_store = useExpensesStore();
    const auth_store = useAuthStore();
    const expenses_api = useExpensesApi();

    const refresh_key = ref(1);
    const background_class = computed(() => deepEqual(expense, expenses_store.current_expense) ? '' : '');
    const approved_class = computed(() => expense.is_approved ? ' bg-accent text-white' : '')
    const is_authorized_to_approve = computed(() => CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST'))
    const is_showing_update_form = ref(false);
    const is_current_expense = computed(() => expense.id === expenses_store.current_expense.id);

    const requestExpenseDeletion = async () => {
        await expenses_api.deleteExpenseById(expense.id);
    }

    const onExpenseClicked = () => {
        if (is_authorized_to_approve.value) {
            is_approved.value = !is_approved.value;
            refresh_key.value += 1;
        }
    }

    const onUpdateClicked = () => {
        if (deepEqual(expense, expenses_store.current_expense)) {
            expenses_store.mode = 'create';
            Object.assign(expense, toRaw(expenses_store.initial_expense))
            expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
            is_showing_update_form.value = false;
            return;
        }

        expenses_store.mode = 'update';
        expenses_store.current_expense = expense;
        expenses_store.initial_expense = unwrapAndClone(expense);
        is_showing_update_form.value = true;
    }

    const onSaveUpdatesClicked = () => {
        is_showing_update_form.value = false;
        expenses_store.mode = 'create';
        expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
    }
</script>

<template>
    <q-item
        :key="refresh_key"
        :clickable="horizontal"
        class="column col-4 items-center q-my-sm q-py-none shadow-3 rounded-5 bg-dark"
        :class="background_class + approved_class"
        @click="onExpenseClicked"
    >
        <div class="col row fit items-center">
            <!-- avatar type icon section -->
            <q-item-section avatar>
                <q-icon
                    :name="getExpenseIcon(expense.type)"
                    :color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'primary')"
                    size="lg"
                />
            </q-item-section>

            <!-- amount or mileage section -->
            <q-item-section class="col col-md-2 text-weight-bold">
                <q-item-label v-if="expense.type === 'MILEAGE'">
                    {{ expense.mileage?.toFixed(1) }} km
                </q-item-label>
                <q-item-label v-else>
                    $ {{ expense.amount.toFixed(2) }}
                </q-item-label>

                <!-- date label -->
                <q-item-label
                    caption
                    lines="1"
                    class="text-uppercase text-weight-light"
                    :class="approved_class"
                >
                    {{ $d(date.extractDate(expense.date, 'YYYY-MM-DD'), {
                        month: 'short', day: 'numeric', weekday:
                            'long'
                    }) }}
                </q-item-label>
            </q-item-section>

            <q-space v-if="horizontal" />

            <!-- attachment file icon -->
            <q-item-section avatar>
                <q-btn
                    push
                    :color="expense.is_approved ? 'white' : 'accent'"
                    :text-color="expense.is_approved ? 'accent' : 'white'"
                    class="col-auto q-mx-sm q-px-sm q-pb-sm"
                    icon="attach_file"
                />
            </q-item-section>

            <q-item-label class="col text-weight-light text-caption">
                <span>attachment_goes_here.jpg</span>
            </q-item-label>

            <!-- comment section -->
            <q-item-section
                v-if="!horizontal"
                top
            >
                <q-item-label
                    lines="1"
                    class="text-weight-medium text-uppercase"
                >
                    {{ $t('timesheet.expense.employee_comment') }}
                </q-item-label>
                <q-item-label
                    caption
                    lines="1"
                    :class="approved_class"
                >
                    {{ expense.comment }}
                </q-item-label>
            </q-item-section>

            <!-- supervisor comment section -->
            <q-item-section
                v-if="is_authorized_to_approve"
                top
            >
                <q-item-label
                    lines="1"
                    class="text-weight-medium text-uppercase"
                >
                    {{ $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
                :key="refresh_key"
                side
                :class="is_current_expense ? 'invisible' : ''"
            >
                <q-btn
                    flat
                    dense
                    size="lg"
                    icon="edit"
                    color="accent"
                    :disable="expense.is_approved"
                    class="q-py-none z-top"
                    :class="expense.is_approved ? 'invisible no-pointer' : ''"
                    @click.stop="onUpdateClicked"
                />
            </q-item-section>

            <q-item-section
                side
                :class="is_current_expense ? 'invisible' : ''"
            >
                <q-icon
                    v-if="expense.is_approved"
                    name="verified"
                    color="white"
                    size="lg"
                />

                <q-btn
                    v-else
                    flat
                    dense
                    size="lg"
                    icon="close"
                    color="negative"
                    class="q-py-none z-top q-my-xs"
                    @click.stop="requestExpenseDeletion"
                />
            </q-item-section>
        </div>

        <q-slide-transition
            @hide="expenses_store.mode === 'update' ? null : expenses_store.is_hiding_create_form = false"
            :duration="200"
        >
            <ExpenseDialogForm
                v-if="is_current_expense && expenses_store.is_hiding_create_form"
                @on-click-update-cancel="onUpdateClicked"
                @on-click-save-updates="onSaveUpdatesClicked"
            />
        </q-slide-transition>
    </q-item>
</template>