class ConfirmDeleteModal {

    constructor(alias = "") {

        this.modalId = alias !== "" ? `confirm2delete-${alias}`: 'confirm2delete';

        const removeClass = alias !== "" ? `btn-remove-${alias}` : 'btn-remove';

        this.btnCancelId = alias !== "" ? `btnCancelDelete-${alias}` : 'btnCancelDelete';
        this.btnDeleteId = alias !== "" ? `btnConfirmDelete-${alias}` : 'btnConfirmDelete';

        this.data = null;

        this.modalHtml = `
            <div class="modal fade" id="${this.modalId}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="${this.modalId}Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="${this.modalId}Label">¿Estás seguro de que deseas eliminar?</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Esta acción no se puede deshacer.
                        </div>
                        <div class="modal-footer">
                            <button id=${this.btnCancelId} type="button" class="btn btn-default" data-bs-dismiss="modal">Cancelar</button>
                            <a id=${this.btnDeleteId} href="javascript:void(0);" class="btn btn-danger btn-confirm ${removeClass}">Eliminar</a>
                        </div><!--//.modal-footer -->
                    </div><!--//.modal-content -->
                </div><!--//.modal-dialog -->
            </div><!--//.modal -->
        `;
    }

    init() {

        // Insertar el modal en el body del documento si no existe
        if (!document.getElementById(this.modalId)) {
            document.body.insertAdjacentHTML('beforeend', this.modalHtml);
        }
        document.getElementById(this.btnCancelId).addEventListener('click', () => {
            const modal = new bootstrap.Modal(document.getElementById(this.modalId));
            modal.hide();
        });
    }

    getModalId() {
        return '#' + this.modalId;
    }

    setData(data) {
        this.data = data;
    }

    getData() {
        return this.data;
    }

    // Método para mostrar el modal
    show(callback) {

        // Mostrar el modal usando Bootstrap
        const modal = new bootstrap.Modal(document.getElementById(this.modalId));
        modal.show();

        // Configurar el evento de confirmación de eliminación
        document.getElementById(this.btnDeleteId).addEventListener('click', () => {
            callback(); // Llamar al callback que el usuario haya proporcionado
            modal.hide(); // Cerrar el modal
        });
    }

    // Método para ocultar el modal si es necesario
    hide() {
        const modal = new bootstrap.Modal(document.getElementById(this.modalId));
        modal.hide();
    }
}


export default ConfirmDeleteModal;