<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import axios from 'axios';
import { useDialogPluginComponent } from 'quasar';

import useNotify from 'src/composables/useNotify';

import VnRow from 'components/ui/VnRow.vue';

const $props = defineProps({
    clients: {
        type: Array,
        required: true,
    },
    promise: {
        type: Function,
        required: true,
    },
});

const { dialogRef } = useDialogPluginComponent();
const { notify } = useNotify();
const { t } = useI18n();

const newObservation = ref(null);
const obsId = ref(null);

const onSubmit = async () => {
    try {
        if (!obsId.value)
            obsId.value = (
                await axios.get('ObservationTypes/findOne', {
                    params: { filter: { where: { description: 'Finance' } } },
                })
            ).data?.id;

        const bodyObs = $props.clients.map((item) => {
            return {
                clientFk: item.clientFk,
                text: newObservation.value,
                observationTypeFk: obsId.value,
            };
        });
        await axios.post('ClientObservations', bodyObs);

        const bodyObsMail = {
            defaulters: $props.clients,
            observation: newObservation.value,
        };
        await axios.post('Defaulters/observationEmail', bodyObsMail);

        await $props.promise();

        notify('globals.dataSaved', 'positive');
    } catch (error) {
        notify(error.message, 'negative');
    }
};
</script>

<template>
    <QDialog ref="dialogRef">
        <QCard class="q-pa-md q-mb-md">
            <QCardSection>
                <QForm @submit="onSubmit()" class="q-pa-sm">
                    <div>
                        {{
                            t('Add observation to all selected clients', {
                                numberClients: t($props.clients.length),
                            })
                        }}
                    </div>
                    <VnRow>
                        <QInput
                            :label="t('Message')"
                            type="textarea"
                            v-model="newObservation"
                        />
                    </VnRow>
                    <div class="q-mt-lg row justify-end">
                        <QBtn
                            :label="t('globals.cancel')"
                            color="primary"
                            flat
                            class="q-mr-md"
                            v-close-popup
                        />
                        <QBtn
                            :label="t('globals.save')"
                            type="submit"
                            color="primary"
                            v-close-popup
                        />
                    </div>
                </QForm>
            </QCardSection>
        </QCard>
    </QDialog>
</template>

<i18n>
    es:
        Add observation to all selected clients: Añadir observación a { numberClients } cliente(s) seleccionado(s)
        Message: Mensaje
</i18n>
