export default class ProjectsPaginator {

    constructor({ container, dataSource }) {

        this.container = container;
        this.dataSource = dataSource;

        this.prevBtn = null;
        this.nextBtn = null;
        this.infoEl = null;

    }

    mount() {

        if (!this.container) return;

        this.container.innerHTML = `
        <div class="projects-pagination"
             style="display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px;">
             
          <button class="page-prev">« قبلی</button>
  
          <span class="page-info"></span>
  
          <button class="page-next">بعدی »</button>
  
        </div>
      `;

        this.prevBtn = this.container.querySelector(".page-prev");
        this.nextBtn = this.container.querySelector(".page-next");
        this.infoEl = this.container.querySelector(".page-info");

        this.prevBtn.addEventListener("click", () => {

            if (this.dataSource.currentPage > 1) {

                this.dataSource.loadPage(
                    this.dataSource.currentPage - 1
                );

            }

        });

        this.nextBtn.addEventListener("click", () => {

            if (this.dataSource.currentPage < this.dataSource.totalPages) {

                this.dataSource.loadPage(
                    this.dataSource.currentPage + 1
                );

            }

        });

    }

    update() {

        if (!this.infoEl) return;

        const page = this.dataSource.currentPage;
        const total = this.dataSource.totalPages;

        this.infoEl.textContent = `صفحه ${page} از ${total}`;

        if (this.prevBtn) {
            this.prevBtn.disabled = page <= 1;
        }

        if (this.nextBtn) {
            this.nextBtn.disabled = page >= total;
        }

    }

    destroy() {

        this.container = null;

    }

}
