<script setup>
import { ref } from 'vue';
import { api } from '@Services/Api.js';

import DestroyModal from '../Destroy.vue';
import Header       from '../Elements/Header.vue';

/** Eventos */
const emit = defineEmits([
    'open',
    'close',
    'update'
]);

/** Propiedades */
const props = defineProps({
    to: Function,
    title: {
        type: String,
        default: 'name'
    },
    subtitle: {
        type: String,
        default: 'description'
    }
});

const model    = ref({});
const modalRef = ref(null);

/** Métodos */
const destroy = () => {
    api.delete(props.to(model.value.id), {
        onSuccess: () => {
            Notify.success(Lang('deleted'));
            emit('update');
        },
        onError: () => {
            Notify.info(Lang('notFound'));
        },
        onFinish: () => {
            modalRef.value.close();
        }
    });
}

/** Exposiciones */
defineExpose({
    open:  (modelData) => {
        model.value = modelData;
        modalRef.value.open();

        emit('open')
    }
});
</script>

<template>
    <DestroyModal
        ref="modalRef"
        @close="$emit('close')"
        @destroy="destroy"
    >
        <Header
            :title="model[title]"
            :subtitle="model[subtitle]"
        />
    </DestroyModal>
</template>