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

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

import useNotify from 'src/composables/useNotify';

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

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

const closeButton = ref(null);

const isLoading = ref(false);

const deleteDms = async () => {
    isLoading.value = true;
    try {
        await axios.post(`ClientDms/${$props.id}/removeFile`);
        if ($props.promise) await $props.promise();
        notify('globals.dataDeleted', 'positive');
    } catch (error) {
        notify(error.message, 'negative');
    } finally {
        closeButton.value.click();
        isLoading.value = false;
    }
};
</script>

<template>
    <QDialog ref="dialogRef">
        <QCard class="q-pa-md q-mb-md">
            <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
                <QIcon name="close" size="sm" />
            </span>

            <QCardSection>
                <div class="mt-1 text-h6">{{ t('This file will be deleted') }}</div>
                <div>{{ t('Are you sure you want to continue?') }}</div>
            </QCardSection>

            <QCardActions class="flex justify-end">
                <QBtn
                    :disabled="isLoading"
                    :label="t('globals.cancel')"
                    :loading="isLoading"
                    class="q-mr-xl"
                    color="primary"
                    flat
                    v-close-popup
                />
                <QBtn
                    :disabled="isLoading"
                    :label="t('globals.save')"
                    :loading="isLoading"
                    @click.stop="deleteDms"
                    color="primary"
                />
            </QCardActions>
        </QCard>
    </QDialog>
</template>

<i18n>
es:
    This file will be deleted: Este fichero va a ser borrado
    Are you sure you want to continue?: ¿Seguro que quieres continuar?
</i18n>
