<script
    setup
    lang="ts"
>
    import { computed, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { useUiStore } from 'src/stores/ui-store';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
    import { convertToMonetaryAmount, getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
    import { type ExpenseType, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';

    interface ExpenseOption {
        label: string;
        value: ExpenseType;
        icon: string;
    }

    const { t } = useI18n();

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

    const COMMENT_MAX_LENGTH = 280;
    const rules = useExpenseRules(t);

    const period_start_date = computed(() => timesheet_store.pay_period?.period_start.replaceAll('-', '/') ?? '');
    const period_end_date = computed(() => timesheet_store.pay_period?.period_end.replaceAll('-', '/') ?? '');

    const expense_options: ExpenseOption[] = [
        { label: t('timesheet.expense.types.PER_DIEM'), value: 'PER_DIEM', icon: getExpenseIcon('PER_DIEM') },
        { label: t('timesheet.expense.types.EXPENSES'), value: 'EXPENSES', icon: getExpenseIcon('EXPENSES') },
        { label: t('timesheet.expense.types.MILEAGE'), value: 'MILEAGE', icon: getExpenseIcon('MILEAGE') },
        { label: t('timesheet.expense.types.ON_CALL'), value: 'ON_CALL', icon: getExpenseIcon('ON_CALL') },
    ]
    const expense_selected = ref(expense_options.find(expense => expense.value == expenses_store.current_expense.type));

    const openDatePicker = () => {
        is_navigator_open.value = true;
        if (timesheet_store.pay_period !== undefined) {
            expenses_store.current_expense.date = timesheet_store.pay_period.period_start;
        }
    };

    const requestExpenseCreationOrUpdate = async () => {
        await expenses_api.upsertExpense(expenses_store.current_expense);
    };

    defineEmits<{
        'onClickUpdateCancel': [void];
    }>();
</script>

<template>
    <q-form
        v-if="!timesheet_store.timesheets?.every(timesheet => timesheet.is_approved)"
        :key="expenses_store.current_expense.id"
        flat
        @submit.prevent="requestExpenseCreationOrUpdate"
        class="column full-width"
    >
        <!-- header -->
        <div
            class="col text-uppercase text-weight-medium text-h6 q-ma-xs"
            :class="expenses_store.mode === 'create' ? 'q-px-md' : 'invisible'"
        >
            {{ $t('timesheet.expense.add_expense') }}
        </div>

        <div
            class="col column items-start rounded-5 q-pb-sm"
            :class="expenses_store.mode === 'create' ? 'q-px-md' : ''"
        >
            <!-- date and type row -->
            <div class="col row q-my-xs full-width">
                <!-- date selection input -->
                <q-input
                    v-model="expenses_store.current_expense.date"
                    dense
                    type="date"
                    outlined
                    readonly
                    stack-label
                    hide-bottom-space
                    color="primary"
                    class="col-auto q-mr-sm"
                    input-class="text-weight-medium"
                    input-style="font-size: 1em;"
                    :label="$t('timesheet.expense.date')"
                >
                    <template #prepend>
                        <q-btn
                            push
                            dense
                            icon="event"
                            color="accent"
                            class="q-mr-sm"
                            @click="openDatePicker"
                        />

                        <q-dialog
                            v-model="is_navigator_open"
                            transition-show="jump-right"
                            transition-hide="jump-right"
                        >
                            <q-date
                                v-model="expenses_store.current_expense.date"
                                mask="YYYY-MM-DD"
                                event-color="accent"
                                :options="date => date >= period_start_date && date <= period_end_date"
                                @update:model-value="is_navigator_open = false"
                            />
                        </q-dialog>
                    </template>

                    <template #label>
                        <span class="text-weight-bold text-accent text-uppercase text-caption">
                            {{ $t('timesheet.expense.date') }}
                        </span>
                    </template>
                </q-input>

                <!-- expenses type selection -->
                <q-select
                    v-model="expense_selected"
                    standout="bg-blue-grey-9 text-white"
                    dense
                    :options="expense_options"
                    hide-dropdown-icon
                    stack-label
                    label-slot
                    hide-bottom-space
                    class="col"
                    color="primary"
                    :label="$t('timesheet.expense.type')"
                    :menu-offset="[0, 10]"
                    menu-anchor="bottom middle"
                    menu-self="top middle"
                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
                    popup-content-style="border: 2px solid var(--q-accent)"
                    :rules="[rules.typeRequired]"
                    @update:model-value="option => expenses_store.current_expense.type = option.value"
                >
                    <template #label>
                        <span class="text-weight-bold text-accent text-uppercase text-caption">
                            {{ $t('timesheet.expense.type') }}
                        </span>
                    </template>

                    <template #selected-item="scope">
                        <div
                            class="row items-center text-weight-bold q-ma-none q-pa-none full-width"
                            :class="ui_store.is_mobile_mode ? 'full-height' : ''"
                            :tabindex="scope.tabindex"
                        >
                            <q-icon
                                :name="scope.opt.icon"
                                size="sm"
                                class="col-auto q-mx-xs"
                            />
                            <span class="col text-uppercase ellipsis">{{ scope.opt.label }}</span>
                        </div>
                    </template>
                </q-select>
            </div>

            <!-- amount and comment row -->
            <div class="col row q-my-xs full-width">
                <!-- amount input -->
                <div class="col q-mr-sm">
                    <q-input
                        v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense?.type ?? 'EXPENSES')"
                        v-model.number="expenses_store.current_expense.amount"
                        key="amount"
                        standout="bg-blue-grey-9"
                        dense
                        label-slot
                        stack-label
                        hide-bottom-space
                        suffix="$"
                        color="primary"
                        input-class="text-right text-weight-bold"
                        :input-style="'font-size: 1.2em;'"
                        lazy-rules="ondemand"
                        :rules="[rules.amountRequired]"
                        @blur="expenses_store.current_expense.amount = convertToMonetaryAmount(expenses_store.current_expense.amount)"
                    >
                        <template #label>
                            <span class="text-weight-bold text-accent text-uppercase text-caption">
                                {{ $t('timesheet.expense.amount') }}
                            </span>
                        </template>
                    </q-input>

                    <!-- mileage input -->
                    <q-input
                        v-else
                        v-model.number="expenses_store.current_expense.mileage"
                        key="mileage"
                        standout="bg-blue-grey-9"
                        input-class="text-right"
                        dense
                        stack-label
                        clearable
                        hide-bottom-space
                        color="primary"
                        label-slot
                        suffix="km"
                        lazy-rules="ondemand"
                        :rules="[rules.mileageRequired]"
                    >
                        <template #label>
                            <span class="text-weight-bold text-accent text-uppercase text-caption">
                                {{ $t('timesheet.expense.mileage') }}
                            </span>
                        </template>
                    </q-input>
                </div>

                <!-- employee comment input -->
                <q-btn
                    push
                    color="accent"
                    :icon="expenses_store.current_expense.comment ? 'chat' : 'chat_bubble_outline'"
                    @click="is_showing_comment_dialog_mobile = true"
                    class="col-auto"
                />

                <q-dialog v-model="is_showing_comment_dialog_mobile">
                    <q-card class="full-width bg-secondary rounded-10">
                        <q-card-section class="q-pa-none">
                            <span
                                class="text-weight-bold text-accent text-uppercase text-caption"
                                style="font-size: 1.5em;"
                            >
                                {{ $t('timesheet.expense.employee_comment') }}
                            </span>
                        </q-card-section>

                        <q-card-section class="q-pa-none bg-primary rounded-10">
                            <q-input
                                v-model="expenses_store.current_expense.comment"
                                standout="bg-blue-grey-9"
                                dense
                                hide-bottom-space
                                color="primary"
                                type="textarea"
                                :maxlength="COMMENT_MAX_LENGTH"
                                lazy-rules="ondemand"
                                :rules="[rules.commentRequired]"
                            >
                            </q-input>
                        </q-card-section>
                    </q-card>
                </q-dialog>
            </div>

            <!-- import attach file section -->
            <q-file
                v-model="files"
                standout="bg-blue-grey-9"
                dense
                use-chips
                multiple
                stack-label
                :label="$t('timesheet.expense.hints.attach_file')"
                class="col full-width q-my-xs"
            >
                <template #prepend>
                    <q-icon
                        name="attach_file"
                        size="sm"
                        color="accent"
                    />
                </template>

                <template #label>
                    <span class="text-weight-bold text-accent text-uppercase text-caption">
                        {{ $t('timesheet.expense.hints.attach_file') }}
                    </span>
                </template>
            </q-file>
        </div>
        <div class="col row full-width items-center">
            <q-space />

            <q-btn
                v-if="expenses_store.mode === 'update'"
                flat
                dense
                class="col-auto"
                icon="clear"
                color="negative"
                :label="$q.screen.gt.sm ? $t('shared.label.cancel') : ''"
                @click="$emit('onClickUpdateCancel')"
            />

            <q-btn
                push
                color="accent"
                :icon="expenses_store.mode === 'update' ? 'save' : 'upload'"
                :label="expenses_store.mode === 'update' ? $t('shared.label.update') : $t('shared.label.add')"
                class="q-px-sm"
                :class="expenses_store.mode === 'create' ? 'q-mr-md q-mb-md' : 'q-mb-sm q-ml-lg'"
                type="submit"
            />
        </div>
    </q-form>
</template>