import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.js";
import compentStyle from "./pagination.css.js";
import { ObcToggleButtonOptionVariant } from "../toggle-button-option/toggle-button-option.js";
import "../toggle-button-group/toggle-button-group.js";
import "../icon-button/icon-button.js";
import "../progress-indicator-dots/progress-indicator-dots.js";
import "../../icons/icon-page-first-google.js";
import "../../icons/icon-chevron-left-google.js";
import "../../icons/icon-chevron-right-google.js";
import "../../icons/icon-page-last-google.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var PaginationVariant = /* @__PURE__ */ ((PaginationVariant2) => {
  PaginationVariant2["regular"] = "regular";
  PaginationVariant2["flat"] = "flat";
  PaginationVariant2["condensed"] = "condensed";
  return PaginationVariant2;
})(PaginationVariant || {});
let ObcPagination = class extends LitElement {
  constructor() {
    super(...arguments);
    this.variant = "regular";
    this.pages = 3;
    this.currentPage = 1;
    this.fullWidth = false;
    this.disabled = false;
    this.handlePageChange = (event) => {
      this.setCurrentPage(Number(event.detail.value));
    };
    this.handleFirstClick = () => {
      if (!this.canNavigateFirst) return;
      this.setCurrentPage(1);
      this.dispatchNavigateEvent("first");
    };
    this.handlePreviousClick = () => {
      if (!this.canNavigatePrevious) return;
      this.setCurrentPage(this.validatedCurrentPage - 1);
      this.dispatchNavigateEvent("previous");
    };
    this.handleNextClick = () => {
      if (!this.canNavigateNext) return;
      this.setCurrentPage(this.validatedCurrentPage + 1);
      this.dispatchNavigateEvent("next");
    };
    this.handleLastClick = () => {
      if (!this.canNavigateLast) return;
      this.setCurrentPage(this.validatedPages);
      this.dispatchNavigateEvent("last");
    };
  }
  get isCondensed() {
    return this.variant === "condensed";
  }
  get toggleButtonVariant() {
    return this.variant === "flat" ? ObcToggleButtonOptionVariant.flat : ObcToggleButtonOptionVariant.regular;
  }
  get validatedPages() {
    return Math.max(1, this.pages);
  }
  get validatedCurrentPage() {
    return Math.max(1, Math.min(this.currentPage, this.validatedPages));
  }
  get canNavigatePrevious() {
    return !this.disabled && this.validatedCurrentPage > 1;
  }
  get canNavigateNext() {
    console.log(
      "canNavigateNext",
      this.disabled,
      this.validatedCurrentPage,
      this.validatedPages
    );
    return !this.disabled && this.validatedCurrentPage < this.validatedPages;
  }
  get canNavigateFirst() {
    return !this.disabled && this.canNavigatePrevious;
  }
  get canNavigateLast() {
    return !this.disabled && this.canNavigateNext;
  }
  get pageNumbers() {
    return Array.from({ length: this.validatedPages }, (_, i) => i + 1);
  }
  get announceMessage() {
    return `Page ${this.validatedCurrentPage} of ${this.validatedPages}`;
  }
  setCurrentPage(newPage) {
    const page = Math.max(1, Math.min(newPage, this.validatedPages));
    if (page === this.currentPage) return;
    this.currentPage = page;
    this.dispatchEvent(
      new CustomEvent("value", {
        detail: { value: page }
      })
    );
  }
  dispatchNavigateEvent(action) {
    this.dispatchEvent(
      new CustomEvent("navigate", {
        detail: { action, currentPage: this.validatedCurrentPage }
      })
    );
  }
  renderToggleButtons() {
    return this.pageNumbers.map(
      (num) => html`<obc-toggle-button-option
          .value=${num.toString()}
          .variant=${this.toggleButtonVariant}
          .selected=${num === this.validatedCurrentPage}
          .ariaLabel=${`Page ${num} of ${this.validatedPages}`}
        >
          ${num}
        </obc-toggle-button-option>`
    );
  }
  renderProgressIndicatorDots() {
    return html`
      <obc-progress-indicator-dots
        .totalSteps=${this.validatedPages}
        .currentStep=${this.validatedCurrentPage}
      ></obc-progress-indicator-dots>
    `;
  }
  renderNavigation() {
    return html`
      <div
        class=${classMap({ "navigation-wrapper": true, disabled: this.disabled })}
        role="navigation"
        aria-label="Pagination"
      >
        <obc-icon-button
          variant="flat"
          aria-label="First page"
          aria-disabled=${this.canNavigateFirst}
          ?disabled=${!this.canNavigateFirst}
          @click=${this.handleFirstClick}
        >
          <obi-page-first-google></obi-page-first-google>
        </obc-icon-button>

        <obc-icon-button
          variant="flat"
          aria-label="Previous page"
          aria-disabled=${this.canNavigatePrevious}
          ?disabled=${!this.canNavigatePrevious}
          @click=${this.handlePreviousClick}
        >
          <obi-chevron-left-google></obi-chevron-left-google>
        </obc-icon-button>

        ${this.isCondensed ? this.renderProgressIndicatorDots() : html`<obc-toggle-button-group
              .value=${this.validatedCurrentPage.toString()}
              .variant=${this.toggleButtonVariant}
              ?disabled=${this.disabled}
              @value=${this.handlePageChange}
            >
              ${this.renderToggleButtons()}
            </obc-toggle-button-group>`}

        <obc-icon-button
          variant="flat"
          aria-label="Next page"
          aria-disabled=${this.canNavigateNext}
          ?disabled=${!this.canNavigateNext}
          @click=${this.handleNextClick}
        >
          <obi-chevron-right-google></obi-chevron-right-google>
        </obc-icon-button>

        <obc-icon-button
          variant="flat"
          aria-label="Last page"
          aria-disabled=${this.canNavigateLast}
          ?disabled=${!this.canNavigateLast}
          @click=${this.handleLastClick}
        >
          <obi-page-last-google></obi-page-last-google>
        </obc-icon-button>
      </div>
    `;
  }
  render() {
    return html`
      <div
        class=${classMap({
      wrapper: true,
      "type-regular": this.variant === "regular",
      "type-flat": this.variant === "flat",
      "type-condensed": this.variant === "condensed",
      disabled: this.disabled
    })}
      >
        <div class="content-container">${this.renderNavigation()}</div>
        <span
          aria-live="polite"
          aria-atomic="true"
          style="position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden;"
        >
          ${this.announceMessage}
        </span>
      </div>
    `;
  }
};
ObcPagination.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcPagination.prototype, "variant", 2);
__decorateClass([
  property({ type: Number })
], ObcPagination.prototype, "pages", 2);
__decorateClass([
  property({ type: Number, attribute: "current-page" })
], ObcPagination.prototype, "currentPage", 2);
__decorateClass([
  property({ type: Boolean, attribute: "full-width", reflect: true })
], ObcPagination.prototype, "fullWidth", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPagination.prototype, "disabled", 2);
ObcPagination = __decorateClass([
  customElement("obc-pagination")
], ObcPagination);
export {
  ObcPagination,
  PaginationVariant
};
//# sourceMappingURL=pagination.js.map
