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

const { t } = useI18n();

const props = defineProps({
    icon: {
        type: String,
        default: null,
    },
    title: {
        type: String,
        default: null,
    },
    message: {
        type: [String, Boolean],
        default: null,
    },
    data: {
        type: Object,
        required: false,
        default: null,
    },
    promise: {
        type: Function,
        required: false,
        default: null,
    },
});

const emit = defineEmits(['confirm', 'cancel', ...useDialogPluginComponent.emits]);
defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
    useDialogPluginComponent();

const title = props.title || t('Confirm');
const message =
    props.message ||
    (props.message !== false ? t('Are you sure you want to continue?') : false);

const isLoading = ref(false);

async function confirm() {
    isLoading.value = true;
    if (props.promise) {
        try {
            await props.promise(props.data);
        } finally {
            isLoading.value = false;
        }
    }
    onDialogOK(props.data);
}

function cancel() {
    emit('cancel');
    onDialogCancel();
}
</script>
<template>
    <QDialog ref="dialogRef" @hide="onDialogHide">
        <QCard class="q-pa-sm">
            <QCardSection class="row items-center q-pb-none">
                <QAvatar
                    :icon="icon"
                    color="primary"
                    text-color="white"
                    size="xl"
                    v-if="icon"
                />
                <span class="text-h6">{{ title }}</span>
                <QSpace />
                <QBtn
                    icon="close"
                    :disable="isLoading"
                    flat
                    round
                    dense
                    @click="cancel()"
                />
            </QCardSection>
            <QCardSection class="q-pb-none" data-cy="VnConfirm_message">
                <span v-if="message !== false" v-html="message" />
            </QCardSection>
            <QCardSection class="row items-center q-pt-none">
                <slot name="customHTML"></slot>
            </QCardSection>
            <QCardActions align="right">
                <QBtn
                    :label="t('globals.cancel')"
                    color="primary"
                    :disable="isLoading"
                    flat
                    @click="cancel()"
                    data-cy="VnConfirm_cancel"
                />
                <QBtn
                    :label="t('globals.confirm')"
                    :title="t('globals.confirm')"
                    color="primary"
                    :loading="isLoading"
                    @click="confirm()"
                    unelevated
                    autofocus
                    data-cy="VnConfirm_confirm"
                />
            </QCardActions>
        </QCard>
    </QDialog>
</template>

<style lang="scss" scoped>
.q-card {
    min-width: 350px;
}
</style>

<i18n>
es:
    Confirm: Confirmar
    Are you sure you want to continue?: ¿Seguro que quieres continuar?
</i18n>
