import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { tv } from 'tailwind-variants';
import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
import '../lukso-icon/index.js';
import '../lukso-button/index.js';

const style = ":host {\n    display: inline-flex\n}";

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;
};
let LuksoPagination = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "primary";
    this.size = "small";
    this.currentPage = 1;
    this.totalPages = 0;
    this.isMobile = false;
    this.styles = tv({
      slots: {
        wrapper: "flex gap-2",
        ellipsis: "items-center flex justify-center",
        numbers: ""
      },
      variants: {
        size: {
          small: {
            ellipsis: "min-w-6",
            numbers: "min-w-6"
          },
          medium: {
            wrapper: "paragraph-inter-16-semi-bold",
            ellipsis: "min-w-8",
            numbers: "min-w-8"
          },
          large: {
            wrapper: "paragraph-inter-16-semi-bold",
            ellipsis: "min-w-8",
            numbers: "min-w-8"
          },
          "x-large": {}
        }
      }
    });
  }
  willUpdate(changedProperties) {
    if (changedProperties.has("currentPage") || changedProperties.has("totalPages")) {
      this.pagination = this.paginate({
        current: this.currentPage,
        max: this.totalPages
      });
    }
  }
  paginate({ current, max }) {
    if (!current || !max) return null;
    const prev = current === 1 ? null : current - 1;
    const next = current === max ? null : current + 1;
    const items = [1];
    if (current === 1 && max === 1) {
      return { current, prev, next, items };
    }
    if (this.isMobile) {
      return { current, prev, next, items: [current] };
    }
    if (current > 4) {
      items.push("...");
    }
    const r = 2;
    const r1 = current - r;
    const r2 = current + r;
    for (let i = Math.max(r1, 2); i <= Math.min(max, r2); i++) {
      items.push(i);
    }
    if (r2 + 1 < max) {
      items.push("...");
    }
    if (r2 < max) {
      items.push(max);
    }
    return { current, prev, next, items };
  }
  async pageChangeEvent() {
    await this.updateComplete;
    const pageChangeEvent = new CustomEvent("on-page-change", {
      detail: {
        value: this.pagination.current,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(pageChangeEvent);
  }
  async handleNextPage() {
    this.currentPage = this.pagination.next;
    await this.pageChangeEvent();
  }
  async handlePrevPage() {
    this.currentPage = this.pagination.prev;
    await this.pageChangeEvent();
  }
  async handlePageChange(page) {
    this.currentPage = page;
    await this.pageChangeEvent();
  }
  iconColor() {
    const whiteVariants = ["primary", "landing"];
    return whiteVariants.includes(this.variant) ? "neutral-100" : "neutral-20";
  }
  iconSize() {
    return this.size === "small" ? "medium" : "large";
  }
  prevPageTemplate() {
    return html`<lukso-button
      size=${this.size}
      variant=${this.variant}
      is-icon
      ?disabled=${this.pagination.prev === null}
      @click=${this.handlePrevPage}
    >
      <lukso-icon
        name="arrow-left-sm"
        size=${this.iconSize()}
        color=${this.iconColor()}
      ></lukso-icon>
    </lukso-button>`;
  }
  nextPageTemplate() {
    return html`<lukso-button
      size=${this.size}
      variant=${this.variant}
      is-icon
      ?disabled=${this.pagination.next === null}
      @click=${this.handleNextPage}
    >
      <lukso-icon
        name="arrow-right-sm"
        size=${this.iconSize()}
        color=${this.iconColor()}
      ></lukso-icon>
    </lukso-button>`;
  }
  numbersTemplate(ellipsisStyles, numbersStyles) {
    const numberTemplates = [];
    for (const item of this.pagination.items) {
      if (item === "...") {
        numberTemplates.push(html` <div class=${ellipsisStyles}>...</div> `);
        continue;
      }
      if (typeof item === "number") {
        numberTemplates.push(
          html`<lukso-button
            size=${this.size}
            variant=${this.variant}
            ?disabled=${this.currentPage === item}
            is-full-width
            is-icon
            @click=${() => this.handlePageChange(item)}
          >
            <div class=${numbersStyles}>${item}</div>
          </lukso-button>`
        );
      }
    }
    return numberTemplates;
  }
  render() {
    const { wrapper, ellipsis, numbers } = this.styles({
      size: this.size
    });
    return html`
      <div class=${wrapper()}>
        ${this.prevPageTemplate()}
        ${this.numbersTemplate(ellipsis(), numbers())}
        ${this.nextPageTemplate()}
      </div>
    `;
  }
};
__decorateClass([
  property({ type: String })
], LuksoPagination.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], LuksoPagination.prototype, "size", 2);
__decorateClass([
  property({ type: Number, attribute: "current-page" })
], LuksoPagination.prototype, "currentPage", 2);
__decorateClass([
  property({ type: Number, attribute: "total-pages" })
], LuksoPagination.prototype, "totalPages", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-mobile" })
], LuksoPagination.prototype, "isMobile", 2);
__decorateClass([
  state()
], LuksoPagination.prototype, "pagination", 2);
LuksoPagination = __decorateClass([
  safeCustomElement("lukso-pagination")
], LuksoPagination);

export { LuksoPagination };
