import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
let EaasPagenation = class EaasPagenation extends LitElement {
    constructor() {
        super(...arguments);
        // 현재 페이지 (default 1)
        this.currentPage = 1;
        // 전체 레코드 수
        this.totalRecords = 0;
        // 한 페이지 당 표시할 아이템 수
        this.pageSize = 10;
        // 한 번에 표시할 최대 페이지 수 (기본값 10)
        this.maxPages = 10;
        // 첫 페이지로 이동
        this.firstPage = () => {
            if (this.currentPage !== 1) {
                this.currentPage = 1;
                this.dispatchPageChange();
            }
        };
        // 이전 페이지로 이동
        this.prevPage = () => {
            if (this.currentPage > 1) {
                this.currentPage -= 1;
                this.dispatchPageChange();
            }
        };
        // 다음 페이지로 이동
        this.nextPage = () => {
            if (this.currentPage < this.totalPages) {
                this.currentPage += 1;
                this.dispatchPageChange();
            }
        };
        // 마지막 페이지로 이동
        this.lastPage = () => {
            if (this.currentPage !== this.totalPages) {
                this.currentPage = this.totalPages || 1;
                this.dispatchPageChange();
            }
        };
    }
    // 전체 페이지 수 계산
    get totalPages() {
        return Math.ceil(this.totalRecords / this.pageSize);
    }
    static { this.styles = css `
    :host {
      display: block;

      .pagenation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9em;
      }
      .number {
        display: flex;
        gap: 4px;
        align-items: center;
      }
      a {
        padding: 4px 8px;
        color: var(--md-sys-color-surface-tint);
        text-decoration: none;
        cursor: pointer;
      }
      a.active {
        color: var(--md-sys-color-on-secondary);
        font-weight: bold;
        text-decoration: underline;
      }
      md-icon {
        font-size: 24px;
        color: var(--md-sys-color-surface-tint);
        cursor: pointer;
      }
    }
  `; }
    render() {
        return html `
      <div class="pagenation">
        <div class="number">
          <md-icon @click="${this.firstPage}">skip_previous</md-icon>
          <md-icon @click="${this.prevPage}">chevron_left</md-icon>
          ${this.renderPageLinks()}
          <md-icon @click="${this.nextPage}">navigate_next</md-icon>
          <md-icon @click="${this.lastPage}">skip_next</md-icon>
        </div>
        <div class="total">총 <strong>${this.totalRecords}</strong>건</div>
      </div>
    `;
    }
    // 현재 총 페이지 수 (숫자 배열)을 기반으로 페이지 링크 렌더링
    renderPageLinks() {
        const pages = [];
        const maxPages = this.maxPages;
        const totalPages = this.totalPages;
        let startPage;
        let endPage;
        if (totalPages <= maxPages) {
            // 전체 페이지 수가 maxPages보다 작거나 같으면 모든 페이지 표시
            startPage = 1;
            endPage = totalPages;
        }
        else {
            const halfMaxPages = Math.floor(maxPages / 2);
            if (this.currentPage <= halfMaxPages + 1) {
                // 초기 페이지 범위
                startPage = 1;
                endPage = maxPages;
            }
            else if (this.currentPage + halfMaxPages >= totalPages) {
                // 마지막 페이지 범위
                startPage = totalPages - maxPages + 1;
                endPage = totalPages;
            }
            else {
                // 그 외의 경우 현재 페이지를 중앙에 배치
                startPage = this.currentPage - halfMaxPages;
                endPage = startPage + maxPages - 1;
            }
        }
        for (let i = startPage; i <= endPage; i++) {
            pages.push(html `
        <a class="${this.currentPage === i ? 'active' : ''}" @click="${(e) => this.onPageClicked(e, i)}">
          ${i}
        </a>
      `);
        }
        return pages;
    }
    // 페이지 링크 클릭 핸들러: 현재 페이지 업데이트 후 이벤트 발생
    onPageClicked(e, page) {
        e.preventDefault();
        if (page !== this.currentPage) {
            this.currentPage = page;
            this.dispatchPageChange();
        }
    }
    // 페이지 변경 이벤트를 상위 컴포넌트로 전달
    dispatchPageChange() {
        this.dispatchEvent(new CustomEvent('page-changed', {
            detail: { page: this.currentPage },
            bubbles: true,
            composed: true
        }));
    }
};
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasPagenation.prototype, "currentPage", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasPagenation.prototype, "totalRecords", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasPagenation.prototype, "pageSize", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasPagenation.prototype, "maxPages", void 0);
EaasPagenation = __decorate([
    customElement('eaas-pagenation')
], EaasPagenation);
export { EaasPagenation };
//# sourceMappingURL=eaas-pagenation.js.map