class ModalConvert2Template {

    constructor() {

        this.modalId = 'modalConvert2Template';
        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">
                    <h4 id="labelTitleConfirmDialog" class="modal-title">${window.language.ClientePrecios.convertir2plantilla}</h4>
                    </div>
                    <div class="modal-body">
                        <div id='error-nombre'></div>
                        <div class="mb-3">
                            <p>${window.language.ClientePrecios.convertir2plantillaText}</p>
                            <p>${window.language.ClientePrecios.convertir2plantillaText2}</p>
                        </div>
                        <div class="mb-3">
                            <label for="nombre_plantilla" class="form-label">
                            ${window.language.ClientePrecios.nombrePlantilla}
                            </label>
                            <input type="text" id="nombre_plantilla" maxLength="100" class="form-control new-address">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="saveTemplate" type="button" class="btn btn-primary">
                            Guardar
                        </button>
                        <button id="cancelTemplate" type="button" class="btn btn-default">
                            Cancelar
                        </button>
                    </div>
                </div>
            </div>
        </div>
      `;

      this.modalInstance = null;
    }

    init() {

        const self = this;

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

        // Configurar el evento del botón de cancelar
        document.getElementById('cancelTemplate').addEventListener('click', () => {
            this.modalInstance.hide();
        });
    }

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

        // Mostrar el modal usando Bootstrap
        this.modalInstance.show();

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

    hide() {
        document.getElementById('nombre_plantilla').value = "";
        const modal = new bootstrap.Modal(document.getElementById(this.modalId));
        modal.hide();
    }

    getNombrePlantilla() {
        return document.getElementById('nombre_plantilla').value;
    }
}

export default ModalConvert2Template;