class MiniPaginator {
    constructor(options) {
        this.instanceName = options.instanceName; // Nombre de la instancia
        this.loadDataUrl = options.loadDataUrl; // URL de la API para cargar datos
        this.tableSelector = options.tableSelector; // Selector del elemento de la tabla
        this.paginatorSelector = options.paginatorSelector; // Selector del elemento del paginador
        this.loadingGifUrl = options.loadingGifUrl; // URL del GIF de carga
        this.renderRow = options.renderRow; // Función para renderizar cada fila
        this.ajaxInProgress = false;
        this.loader = {};
        this.query_string = options.query_string;
        $(this.paginatorSelector).html('');
        this.loadItems(1);
    }

    loadItems(page) {
        if(this.ajaxInProgress) {
            return;
        }
        overlay(this.tableSelector);
        this.ajaxInProgress = true;
        $.ajax({
            url: `${this.loadDataUrl}?page=${page}&`+this.query_string,
            type: 'POST',
            dataType: 'json',
            success: (response) => {
                if (response.success) {
                    overlay(this.tableSelector, 'hide')
                    this.renderTable(response.data.data);
                    this.generatePagination(response.data);
                }
            }
        }).done(() => {
            this.ajaxInProgress = false;
        });
    }

    renderTable(data) {
        let html = '';
        this.loader = {};

        data.forEach((item) => {
            this.loader[item.id] = item;
            html += this.renderRow(item);
        });

        $(this.tableSelector).html(html);
    }

    generatePagination(data) {
        let paginationHtml = '<nav aria-label="Page navigation"><ul class="pagination">';

        data.links.forEach(link => {
            let activeClass = link.active ? ' active' : '';
            let pageItemClass = link.url === null ? ' disabled' : '';
            let label = link.label.replace(/&hellip;/, '...').trim();

            let action = label === "&laquo; Previous" ? `(${data.current_page - 1})` :
                label === "Next &raquo;" ? `(${data.current_page + 1})` :
                    `(${label})`;

            paginationHtml += `<li class="page-item${activeClass}${pageItemClass}">
                                    <span class="page-link" onclick="${this.instanceName}.loadItems${action}">${label}</span>
                                </li>`;
        });

        paginationHtml += '</ul></nav>';
        $(this.paginatorSelector).html(paginationHtml);
    }

    showItem(id) {
        // Lógica para mostrar el item
        console.log("Mostrando item:", this.loader[id]);
    }
}