Pagination

export default class Pagination {
    constructor(module, onChange) {
        this.module = module;
        this.onChange = onChange;
        this.pages = this.module.querySelectorAll('.js-page');
        this.previousButton = this.module.querySelector('.js-previous');
        this.nextButton = this.module.querySelector('.js-next');
        this.currentPage = 1;
        this.numberOfPages = 1;
        this.init();
    }

    init() {
        this.pages.forEach((page) => {
            page.addEventListener('click', (e) => {
                e.preventDefault();

                const topAnchor = document.querySelector('#top');
                if (topAnchor) {
                    topAnchor.scrollIntoView({ block: 'center' });
                }

                const link = e.target;
                this.currentPage = parseInt(link.dataset.page, 10);
                this.updateUI();
                if (this.onChange) {
                    this.onChange();
                }
            });
        });

        this.previousButton.addEventListener('click', (e) => {
            if (!e.target.classList.contains('disabled')) {
                this.currentPage--;
                this.updateUI();
                if (this.onChange) {
                    this.onChange();
                }
            }
        });

        this.nextButton.addEventListener('click', (e) => {
            if (!e.target.classList.contains('disabled')) {
                this.currentPage++;
                this.updateUI();
                if (this.onChange) {
                    this.onChange();
                }
            }
        });

        this.updateUI();
    }

    setNumberOfPages(numberOfPages) {
        this.numberOfPages = numberOfPages;
        this.updateUI();
    }

    setPage(currentPage) {
        this.currentPage = currentPage;
        this.updateUI();
    }

    resetButtons() {
        this.pages.forEach((btn) => {
            btn.classList.remove('selected');
        });
    }

    updateUI() {
        if (this.numberOfPages > 1) {
            this.module.style.display = 'flex';
        } else {
            this.module.style.display = 'none';
            return;
        }

        if (this.currentPage > 1) {
            this.previousButton.classList.remove('disabled');
        } else {
            this.previousButton.classList.add('disabled');
        }
        this.module.querySelector('.js-dots-left').style.display = this.currentPage > 3 ? '' : 'none';
        this.module.querySelector('.js-dots-right').style.display = this.currentPage < this.numberOfPages - 2 ? '' : 'none';

        if (this.currentPage < this.numberOfPages) {
            this.nextButton.classList.remove('disabled');
        } else {
            this.nextButton.classList.add('disabled');
        }

        if (this.currentPage < 4) {
            this.setPageNumbers(2);
        } else if (this.currentPage >= this.numberOfPages - 2) {
            this.setPageNumbers(this.numberOfPages - 3);
        } else {
            this.setPageNumbers(this.currentPage - 1);
        }

        this.resetButtons();
        this.module.querySelector(`.js-page[data-page='${this.currentPage}']`).classList.add('selected');
    }

    setPageNumbers(startNumber) {
        this.setPageButton(startNumber, '.js-second-page');
        this.setPageButton(startNumber + 1, '.js-third-page');
        this.setPageButton(startNumber + 2, '.js-fourth-page');

        const lastPageButton = this.module.querySelector('.js-last-page');
        if (this.numberOfPages > 4) {
            lastPageButton.innerText = this.numberOfPages;
            lastPageButton.dataset.page = this.numberOfPages;
            lastPageButton.style.display = '';
            lastPageButton.setAttribute('aria-label', `Page ${this.numberOfPages}`);
        } else {
            lastPageButton.style.display = 'none';
        }
    }

    setPageButton(pageNumber, pageSelector) {
        const pageButton = this.module.querySelector(pageSelector);
        if (pageNumber > this.numberOfPages) {
            pageButton.style.display = 'none';
        } else {
            pageButton.style.display = '';
            pageButton.innerText = pageNumber;
            pageButton.dataset.page = pageNumber;
            pageButton.setAttribute('aria-label', `Page ${pageNumber}`);
        }
    }
}