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

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

const route = useRoute();
const { t } = useI18n();

const entryObservationsRef = ref(null);
const entryObservationsOptions = ref([]);

const sortEntryObservationOptions = (data) => {
    entryObservationsOptions.value = [...data].sort((a, b) =>
        a.description.localeCompare(b.description)
    );
};

onMounted(() => {
    if (entryObservationsRef.value) entryObservationsRef.value.reload();
});
</script>
<template>
    <FetchData
        url="ObservationTypes"
        @on-fetch="(data) => sortEntryObservationOptions(data)"
        auto-load
    />
    <CrudModel
        data-key="EntryAccount"
        url="EntryObservations"
        model="EntryAccount"
        :filter="{
            fields: ['id', 'entryFk', 'observationTypeFk', 'description'],
            where: { entryFk: route.params.id },
        }"
        ref="entryObservationsRef"
        :default-remove="false"
        :data-required="{ entryFk: route.params.id }"
    >
        <template #body="{ rows, validate }">
            <QCard class="q-pa-md">
                <VnRow
                    v-for="(row, index) in rows"
                    :key="index"
                    class="row q-gutter-md q-mb-md"
                >
                    <VnSelectFilter
                        :label="t('entry.notes.observationType')"
                        v-model="row.observationTypeFk"
                        :options="entryObservationsOptions"
                        :disable="!!row.id"
                        option-label="description"
                        option-value="id"
                        hide-selected
                    />

                    <VnInput
                        :label="t('globals.description')"
                        v-model="row.description"
                        :rules="validate('EntryObservation.description')"
                    />

                    <div class="row justify-center items-center">
                        <QIcon
                            name="delete"
                            size="sm"
                            class="cursor-pointer"
                            color="primary"
                            @click="entryObservationsRef.remove([row])"
                        >
                            <QTooltip>
                                {{ t('Remove note') }}
                            </QTooltip>
                        </QIcon>
                    </div>
                </VnRow>
                <QIcon
                    name="add"
                    size="sm"
                    class="cursor-pointer"
                    color="primary"
                    @click="entryObservationsRef.insert()"
                >
                    <QTooltip>
                        {{ t('Add note') }}
                    </QTooltip>
                </QIcon>
            </QCard>
        </template>
    </CrudModel>
</template>

<i18n>
    es:
        Add note: Añadir nota
        Remove note: Quitar nota
</i18n>
