import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod
} from "../../chunks/chunk.QU3DSPNU.js";
var _GdsPagination_instances, pageCount_get, config_get, getVisiblePages_fn, renderPageButton_fn, renderPageButtons_fn, renderJumpFirstButton_fn, renderPreviousButton_fn, renderNextButton_fn, renderJumpLastButton_fn, renderNavigationControls_fn, renderPageSizeOption_fn, renderPageSizeMenu_fn, renderLabel_fn, handlePageChange_fn, handlePageSizeMenuClick_fn, handlePopoverStateChange_fn, handleCustomPageInput_fn;
import { localized, msg } from "@lit/localize";
import { property, query, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import { GdsElement } from "../../gds-element.js";
import { tokens } from "../../tokens.style.js";
import { watchMediaQuery } from "../../utils/decorators/index.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsButton } from "../button/button.component.js";
import {
  GdsContextMenu,
  GdsMenuItem
} from "../context-menu/context-menu.component.js";
import { GdsDropdown } from "../dropdown/dropdown.component.js";
import { IconChevronBottom } from "../icon/icons/chevron-bottom.component.js";
import { IconChevronDoubleLeft } from "../icon/icons/chevron-double-left.component.js";
import { IconChevronDoubleRight } from "../icon/icons/chevron-double-right.component.js";
import { IconChevronLeftSmall } from "../icon/icons/chevron-left-small.component.js";
import { IconChevronRightSmall } from "../icon/icons/chevron-right-small.component.js";
import { IconChevronRight } from "../icon/icons/chevron-right.component.js";
import { GdsInput } from "../input/input.component.js";
import { GdsPopover } from "../popover/popover.component.js";
import { GdsText } from "../text/text.component.js";
import { PaginationStyles } from "./pagination.styles.js";
const DENSITY_CONFIG = {
  compact: {
    button: "small",
    font: "detail-book-s",
    gap: "xl",
    navGap: "xs",
    input: "small",
    inputWidth: "140px",
    inputPadding: "m"
  },
  comfortable: {
    button: "small",
    font: "detail-book-s",
    gap: "2xl",
    navGap: "s",
    input: "small",
    inputWidth: "140px",
    inputPadding: "m"
  },
  spacious: {
    button: "medium",
    font: "detail-book-m",
    gap: "2xl",
    navGap: "s",
    input: "large",
    inputWidth: "200px",
    inputPadding: "xl"
  }
};
let GdsPagination = class extends withMarginProps(
  withSizeXProps(withLayoutChildProps(GdsElement))
) {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsPagination_instances);
    this.page = 1;
    this.rows = 10;
    this.total = 0;
    this.options = [5, 10, 25, 50];
    this.jump = false;
    this.hideOptions = false;
    this.density = "comfortable";
    this.label = "";
    this._isMobile = false;
    this._jumpPopoverOpen = false;
  }
  _handleMobile(matches) {
    this._isMobile = matches;
  }
  render() {
    return html`
      <gds-flex
        align-items="center"
        justify-content="space-between"
        width="100%"
        gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}"
      >
        ${__privateMethod(this, _GdsPagination_instances, renderLabel_fn).call(this)}
        <gds-flex aling-items="center" gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}" flex="1">
          ${[__privateMethod(this, _GdsPagination_instances, renderNavigationControls_fn).call(this), __privateMethod(this, _GdsPagination_instances, renderPageSizeMenu_fn).call(this)]}
        </gds-flex>
      </gds-flex>
    `;
  }
};
_GdsPagination_instances = new WeakSet();
pageCount_get = function() {
  return Math.ceil(this.total / this.rows);
};
config_get = function() {
  return DENSITY_CONFIG[this.density];
};
getVisiblePages_fn = function(pageCount) {
  if (pageCount <= 7) {
    return Array.from({ length: pageCount }, (_, i) => i + 1);
  }
  const lastPage = pageCount;
  const pages = [];
  pages.push(1);
  if (this.page <= 4) {
    pages.push(2, 3, 4, 5, "...", lastPage);
  } else if (this.page >= pageCount - 3) {
    pages.push(
      "...",
      pageCount - 4,
      pageCount - 3,
      pageCount - 2,
      pageCount - 1,
      lastPage
    );
  } else {
    pages.push(
      "...",
      this.page - 1,
      this.page,
      this.page + 1,
      "...",
      lastPage
    );
  }
  return pages;
};
renderPageButton_fn = function(page) {
  if (page === "...") {
    return html`
        <gds-popover
          disableMobileStyles
          @gds-ui-state=${__privateMethod(this, _GdsPagination_instances, handlePopoverStateChange_fn)}
        >
          <gds-button
            size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
            rank="tertiary"
            slot="trigger"
            label="${msg("Jump to page")}"
            aria-expanded="${this._jumpPopoverOpen}"
            aria-haspopup="dialog"
          >
            ...
          </gds-button>
          <gds-flex
            flex-direction="column"
            padding="${__privateGet(this, _GdsPagination_instances, config_get).inputPadding}"
            width="${__privateGet(this, _GdsPagination_instances, config_get).inputWidth}"
            max-height="280px"
          >
            <gds-input
              size="${__privateGet(this, _GdsPagination_instances, config_get).input}"
              label="${msg("Go to page")}"
              type="number"
              min="1"
              max="${__privateGet(this, _GdsPagination_instances, pageCount_get)}"
              @change=${__privateMethod(this, _GdsPagination_instances, handleCustomPageInput_fn)}
            >
              <gds-button
                size="xs"
                label="${msg("Go")}"
                rank="secondary"
                @click=${__privateMethod(this, _GdsPagination_instances, handleCustomPageInput_fn)}
                slot="trail"
              >
                <gds-icon-chevron-right></gds-icon-chevron-right>
              </gds-button>
            </gds-input>
          </gds-flex>
        </gds-popover>
      `;
  }
  const pageNum = page;
  const isActive = this.page === pageNum;
  const currentPageLabel = `${msg("Current page")}, ${msg("page")} ${pageNum}`;
  const goToPageLabel = `${msg("Go to page")} ${pageNum}`;
  const label = isActive ? currentPageLabel : goToPageLabel;
  return html`
      <gds-button
        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
        rank="${isActive ? "primary" : "tertiary"}"
        label="${label}"
        aria-current="${isActive ? "page" : "false"}"
        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageNum)}
      >
        ${pageNum}
      </gds-button>
    `;
};
renderPageButtons_fn = function() {
  const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
  const visiblePages = __privateMethod(this, _GdsPagination_instances, getVisiblePages_fn).call(this, pageCount);
  return html`${visiblePages.map((page) => __privateMethod(this, _GdsPagination_instances, renderPageButton_fn).call(this, page))}`;
};
renderJumpFirstButton_fn = function() {
  return html`
      <gds-button
        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
        rank="secondary"
        label="${msg("Go to first page")}"
        ?disabled=${this.page === 1}
        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, 1)}
      >
        <gds-icon-chevron-double-left size="l"></gds-icon-chevron-double-left>
      </gds-button>
    `;
};
renderPreviousButton_fn = function() {
  return html`
      <gds-button
        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
        rank="secondary"
        label="${msg("Go to previous page")}"
        ?disabled=${this.page === 1}
        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, this.page - 1)}
      >
        <gds-icon-chevron-left-small size="l"></gds-icon-chevron-left-small>
      </gds-button>
    `;
};
renderNextButton_fn = function() {
  const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
  return html`
      <gds-button
        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
        rank="secondary"
        label="${msg("Go to next page")}"
        ?disabled=${this.page === pageCount}
        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, this.page + 1)}
      >
        <gds-icon-chevron-right-small size="l"></gds-icon-chevron-right-small>
      </gds-button>
    `;
};
renderJumpLastButton_fn = function() {
  const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
  return html`
      <gds-button
        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
        rank="secondary"
        label="${msg("Go to last page")}"
        ?disabled=${this.page === pageCount}
        @click=${() => __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageCount)}
      >
        <gds-icon-chevron-double-right size="l"></gds-icon-chevron-double-right>
      </gds-button>
    `;
};
renderNavigationControls_fn = function() {
  return html`
      <gds-flex
        gap="${__privateGet(this, _GdsPagination_instances, config_get).navGap}"
        align-items="center"
        class="navigation-controls"
        justify-content="center; m{flex-end}"
        flex="1"
      >
        ${[
    when(this.jump, () => __privateMethod(this, _GdsPagination_instances, renderJumpFirstButton_fn).call(this)),
    __privateMethod(this, _GdsPagination_instances, renderPreviousButton_fn).call(this)
  ]}
        <gds-flex gap="4xs" align-items="center">
          ${__privateMethod(this, _GdsPagination_instances, renderPageButtons_fn).call(this)}
        </gds-flex>
        ${[
    __privateMethod(this, _GdsPagination_instances, renderNextButton_fn).call(this),
    when(this.jump, () => __privateMethod(this, _GdsPagination_instances, renderJumpLastButton_fn).call(this))
  ]}
      </gds-flex>
    `;
};
renderPageSizeOption_fn = function(size) {
  const isSelected = this.rows === size;
  return html`
      <gds-menu-item
        data-value=${size}
        class=${classMap({ selected: isSelected })}
        size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
      >
        ${size}
      </gds-menu-item>
    `;
};
renderPageSizeMenu_fn = function() {
  if (this._isMobile || this.hideOptions) return null;
  const rowsLabel = `${msg("Rows per page")}, ${this.rows} ${msg("selected")}`;
  return html`
      <gds-flex align-items="center" gap="s">
        <gds-text
          font="${__privateGet(this, _GdsPagination_instances, config_get).font}"
          color="neutral-01"
          id="rows-per-page-label"
        >
          ${msg("Rows per page")}
        </gds-text>
        <gds-context-menu @gds-menu-item-click=${__privateMethod(this, _GdsPagination_instances, handlePageSizeMenuClick_fn)}>
          <gds-button
            slot="trigger"
            size="${__privateGet(this, _GdsPagination_instances, config_get).button}"
            rank="secondary"
            label="${rowsLabel}"
            aria-labelledby="rows-per-page-label"
          >
            ${this.rows}
            <gds-icon-chevron-bottom
              slot="trail"
              size="m"
            ></gds-icon-chevron-bottom>
          </gds-button>
          ${this.options.map((size) => __privateMethod(this, _GdsPagination_instances, renderPageSizeOption_fn).call(this, size))}
        </gds-context-menu>
      </gds-flex>
    `;
};
renderLabel_fn = function() {
  if (this._isMobile || !this.label) return null;
  return html`
      <gds-text
        font="${__privateGet(this, _GdsPagination_instances, config_get).font}"
        color="neutral-02"
        aria-live="polite"
        aria-atomic="true"
      >
        ${this.label}
      </gds-text>
    `;
};
handlePageChange_fn = function(newPage) {
  this.dispatchCustomEvent("gds-page-change", {
    detail: { page: newPage },
    bubbles: true
  });
};
handlePageSizeMenuClick_fn = function(e) {
  const item = e.target;
  const limit = parseInt(item.dataset.value || "10");
  if (limit !== this.rows) {
    this.dispatchCustomEvent("gds-rows-change", {
      detail: { rows: limit },
      bubbles: true
    });
  }
};
handlePopoverStateChange_fn = function(e) {
  this._jumpPopoverOpen = e.detail.open;
  if (e.detail.open) {
    const popover = e.target;
    const input = popover.querySelector("gds-input");
    if (input) {
      requestAnimationFrame(() => {
        input.focus();
      });
    }
  }
};
handleCustomPageInput_fn = function(e) {
  const input = e.target;
  const pageInput = input.closest("gds-input");
  if (pageInput) {
    const pageNum = parseInt(pageInput.value, 10);
    if (pageNum && pageNum >= 1 && pageNum <= __privateGet(this, _GdsPagination_instances, pageCount_get)) {
      __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageNum);
      const popover = pageInput.closest("gds-popover");
      if (popover) popover.hide();
    }
  }
};
GdsPagination.styles = [tokens, PaginationStyles];
__decorateClass([
  property({ type: Number })
], GdsPagination.prototype, "page", 2);
__decorateClass([
  property({ type: Number })
], GdsPagination.prototype, "rows", 2);
__decorateClass([
  property({ type: Number })
], GdsPagination.prototype, "total", 2);
__decorateClass([
  property({ type: Array })
], GdsPagination.prototype, "options", 2);
__decorateClass([
  property({ type: Boolean })
], GdsPagination.prototype, "jump", 2);
__decorateClass([
  property({
    attribute: "hide-options",
    type: Boolean,
    reflect: false
  })
], GdsPagination.prototype, "hideOptions", 2);
__decorateClass([
  property({ reflect: false })
], GdsPagination.prototype, "density", 2);
__decorateClass([
  property()
], GdsPagination.prototype, "label", 2);
__decorateClass([
  query("#page-input")
], GdsPagination.prototype, "_elInput", 2);
__decorateClass([
  state()
], GdsPagination.prototype, "_isMobile", 2);
__decorateClass([
  state()
], GdsPagination.prototype, "_jumpPopoverOpen", 2);
__decorateClass([
  watchMediaQuery("(max-width: 768px)")
], GdsPagination.prototype, "_handleMobile", 1);
GdsPagination = __decorateClass([
  localized(),
  gdsCustomElement("gds-pagination", {
    dependsOn: [
      GdsButton,
      GdsPopover,
      GdsText,
      GdsInput,
      GdsDropdown,
      GdsContextMenu,
      GdsMenuItem,
      IconChevronBottom,
      IconChevronLeftSmall,
      IconChevronDoubleLeft,
      IconChevronRight,
      IconChevronRightSmall,
      IconChevronDoubleRight
    ]
  })
], GdsPagination);
export {
  GdsPagination
};
