<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() {
    if (!isSaving.value) {
        isSaving.value = true;
        await ticketNotesCrudRef.value?.saveChanges();
        isSaving.value = false;
    }
}
</script>

<template>
    <FetchData
        @on-fetch="
            (data) =>
                (observationTypes = data.map((type) => {
                    type.label = t(`ticketNotes.observationTypes.${type.description}`);
                    return type;
                }))
        "
        auto-load
        url="ObservationTypes"
    />
    <div class="flex justify-center">
        <CrudModel
            ref="ticketNotesCrudRef"
            data-key="TicketNotes"
            url="TicketObservations"
            model="TicketNotes"
            :filter="crudModelFilter"
            :data-required="crudModelRequiredData"
            :default-remove="false"
            auto-load
            style="max-width: 800px"
        >
            <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="label"
                            option-value="id"
                            v-model="row.observationTypeFk"
                            :disable="!!row.id"
                        />
                        <VnInput
                            :label="t('ticketNotes.description')"
                            v-model="row.description"
                            class="col"
                            @keyup.enter="handleSave"
                        />
                        <QIcon
                            name="delete"
                            size="sm"
                            class="cursor-pointer"
                            color="primary"
                            @click="handleDelete(row)"
                        >
                            <QTooltip>
                                {{ t('ticketNotes.removeNote') }}
                            </QTooltip>
                        </QIcon>
                    </div>
                    <VnRow v-if="observationTypes.length > rows.length">
                        <QBtn
                            icon="add_circle"
                            shortcut="+"
                            flat
                            class="fill-icon-on-hover q-ml-md"
                            color="primary"
                            @click="ticketNotesCrudRef.insert()"
                        >
                            <QTooltip>
                                {{ t('ticketNotes.addNote') }}
                            </QTooltip>
                        </QBtn>
                    </VnRow>
                </QCard>
            </template>
        </CrudModel>
    </div>
</template>
