<script
    setup
    lang="ts"
>
    import { inject, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { default_expense, EXPENSE_TYPE, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
    import { makeExpenseRules } from 'src/modules/timesheets/utils/expense.util';
    import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';

    const { t } = useI18n();

    const expenses_store = useExpensesStore();
    const expenses_api = useExpensesApi();
    const files = defineModel<File[] | null>('files');
    const is_navigator_open = ref(false);

    const COMMENT_MAX_LENGTH = 280;
    const employee_email = inject<string>('employeeEmail');
    const rules = makeExpenseRules(t);

    const cancelUpdateMode = () => {
        expenses_store.current_expense = default_expense;
        expenses_store.initial_expense = default_expense;
        expenses_store.mode = 'create';
    }

    const requestExpenseCreationOrUpdate = async () => {
        if (expenses_store.mode === 'create') await expenses_api.createExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
        else await expenses_api.updateExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
    }
</script>

<template>
    <q-form
        flat
        v-if="!expenses_store.pay_period_expenses.is_approved"
        @submit.prevent="requestExpenseCreationOrUpdate"
    >
        <div class="text-subtitle2 q-py-sm">
            {{ $t('timesheet.expense.add_expense') }}
        </div>
        <div
            class="row justify-between rounded-5"
            :class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
        >

            <!-- date selection input -->
            <q-input
                v-model="expenses_store.current_expense.date"
                dense
                filled
                readonly
                stack-label
                class="col q-px-xs"
                color="primary"
                :label="$t('timesheet.expense.date')"
            >
                <template #before>
                    <q-btn
                        push
                        dense
                        icon="event"
                        color="primary"
                        @click="is_navigator_open = true"
                    />
                    <q-dialog v-model="is_navigator_open">
                        <q-date
                            v-model="expenses_store.current_expense.date"
                            @update:model-value="is_navigator_open = false"
                            mask="YYYY-MM-DD"
                        />
                    </q-dialog>
                </template>
            </q-input>

            <!-- expenses type selection -->
            <q-select
                v-model="expenses_store.current_expense.type"
                :options="EXPENSE_TYPE"
                filled
                dense
                class="col q-px-xs"
                color="primary"
                emit-value
                map-options
                :label="$t('timesheet.expense.type')"
                :rules="[rules.typeRequired]"
                :option-label="label => $t(label)"
            />

            <!-- amount input -->
            <template v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense.type)">
                <q-input
                    key="amount"
                    v-model.number="expenses_store.current_expense.amount"
                    filled
                    input-class="text-right"
                    dense
                    stack-label
                    clearable
                    color="primary"
                    class="col q-px-xs"
                    :label="$t('timesheet.expense.amount')"
                    suffix="$"
                    lazy-rules="ondemand"
                    :rules="[rules.amountRequired]"
                />
            </template>

            <!-- mileage input -->
            <template v-else>
                <q-input
                    key="mileage"
                    v-model.number="expenses_store.current_expense.mileage"
                    filled
                    input-class="text-right"
                    dense
                    stack-label
                    clearable
                    color="primary"
                    class="col q-px-xs"
                    :label="$t('timesheet.expense.mileage')"
                    suffix="km"
                    lazy-rules="ondemand"
                    :rules="[rules.mileageRequired]"
                />
            </template>

            <!-- employee comment input -->
            <q-input
                v-model="expenses_store.current_expense.comment"
                filled
                color="primary"
                type="text"
                class="col q-px-sm"
                dense
                stack-label
                clearable
                :counter="true"
                :maxlength="COMMENT_MAX_LENGTH"
                lazy-rules="ondemand"
                :rules="[rules.commentRequired]"
            >
                <template #label>
                    <span class="text-weight-bold ">
                        {{ $t('timesheet.expense.comment') }}
                    </span>
                </template>
            </q-input>

            <!-- import attach file section -->
            <q-file
                v-model="files"
                :label="$t('timesheet.expense.hints.attach_file')"
                filled
                use-chips
                multiple
                stack-label
                class="col"
                style="max-width: 300px;"
                dense
            >
                <template #prepend>
                    <q-icon
                        name="attach_file"
                        size="sm"
                        color="primary"
                    />
                </template>
            </q-file>

            <!-- add btn section -->
            <div>
                <q-btn
                    v-if="expenses_store.mode === 'update'"
                    flat
                    dense
                    size="sm"
                    class="q-mt-sm q-ml-sm"
                    @click="cancelUpdateMode"
                />

                <q-btn
                    push
                    dense
                    color="primary"
                    icon="add"
                    size="sm"
                    class="q-mt-sm q-ml-sm"
                    type="submit"
                />
            </div>
        </div>
    </q-form>
</template>