<script setup>
import { ref, watch, computed, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import CrudModel from 'components/CrudModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';

import { useArrayData } from 'src/composables/useArrayData';

const route = useRoute();
const { t } = useI18n();
const ticketNotesCrudRef = ref(null);
const observationTypes = ref([]);
const arrayData = useArrayData('TicketNotes');
const { store } = arrayData;
const isSaving = ref(false);

const crudModelFilter = reactive({
    where: { ticketFk: route.params.id },
    fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
});

const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));

watch(
    () => route.params.id,
    async () => {
        crudModelFilter.where.ticketFk = route.params.id;
        store.filter = crudModelFilter;
        await ticketNotesCrudRef.value.reload();
    },
);
function handleDelete(row) {
    ticketNotesCrudRef.value.remove([row]);
}

async function handleSave(e) {
    if (e.shiftKey && e.key === 'Enter') return;
    e.preventDefault();
    if (!isSaving.value) {
        isSaving.value = true;
        await ticketNotesCrudRef.value?.saveChanges();
        isSaving.value = false;
    }
}
</script>

<template>
    <FetchData
        @on-fetch="(data) => (observationTypes = data)"
        auto-load
        url="ObservationTypes"
    />
    <div class="full-width flex justify-center">
        <QPage class="card-width q-pa-lg">
            <CrudModel
                class="fit"
                ref="ticketNotesCrudRef"
                data-key="TicketNotes"
                url="TicketObservations"
                model="TicketNotes"
                :filter="crudModelFilter"
                :data-required="crudModelRequiredData"
                :default-remove="false"
                auto-load
            >
                <template #body="{ rows }">
                    <QCard class="q-px-lg q-py-md">
                        <div
                            v-for="(row, index) in rows"
                            :key="index"
                            class="q-mb-md row items-center q-gutter-x-md"
                        >
                            <VnSelect
                                :label="t('ticketNotes.observationType')"
                                :options="observationTypes"
                                hide-selected
                                option-label="description"
                                option-value="id"
                                v-model="row.observationTypeFk"
                                :disable="!!row.id"
                                data-cy="ticketNotesObservationType"
                            />
                            <VnInput
                                :label="t('basicData.description')"
                                v-model="row.description"
                                class="col"
                                @keydown.enter.stop="handleSave"
                                autogrow
                                data-cy="ticketNotesDescription"
                            />
                            <QIcon
                                name="delete"
                                size="sm"
                                class="cursor-pointer"
                                color="primary"
                                @click="handleDelete(row)"
                                data-cy="ticketNotesRemoveNoteBtn"
                            >
                                <QTooltip>
                                    {{ t('ticketNotes.removeNote') }}
                                </QTooltip>
                            </QIcon>
                        </div>
                        <VnRow v-if="observationTypes.length > rows.length">
                            <QBtn
                                icon="add_circle"
                                v-shortcut="'+'"
                                flat
                                class="fill-icon-on-hover q-ml-md"
                                color="primary"
                                @click="ticketNotesCrudRef.insert()"
                                data-cy="ticketNotesAddNoteBtn"
                            >
                                <QTooltip>
                                    {{ t('ticketNotes.addNote') }}
                                </QTooltip>
                            </QBtn>
                        </VnRow>
                    </QCard>
                </template>
            </CrudModel>
        </QPage>
    </div>
</template>
