/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
import { p as playBackOutline, g as chevronBack, h as chevronForward, i as playForwardOutline } from './index2.js';
import { d as defineCustomElement$3 } from './gasco-item2.js';
import { d as defineCustomElement$2 } from './gasco-list2.js';
import { d as defineCustomElement$1 } from './icon.js';

function paginate(totalItems, currentPage = 1, pageSize = 10) {
  // calculate total pages
  let totalPages = Math.ceil(totalItems / pageSize);
  const maxPages = totalPages;
  // ensure current page isn't out of range
  if (currentPage < 1) {
    currentPage = 1;
  }
  else if (currentPage > totalPages) {
    currentPage = totalPages;
  }
  let startPage, endPage;
  if (totalPages <= maxPages) {
    // total pages less than max so show all pages
    startPage = 1;
    endPage = totalPages;
  }
  else {
    // total pages more than max so calculate start and end pages
    let maxPagesBeforeCurrentPage = Math.floor(maxPages / 2);
    let maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1;
    if (currentPage <= maxPagesBeforeCurrentPage) {
      // current page near the start
      startPage = 1;
      endPage = maxPages;
    }
    else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
      // current page near the end
      startPage = totalPages - maxPages + 1;
      endPage = totalPages;
    }
    else {
      // current page somewhere in the middle
      startPage = currentPage - maxPagesBeforeCurrentPage;
      endPage = currentPage + maxPagesAfterCurrentPage;
    }
  }
  // calculate start and end item indexes
  let startIndex = (currentPage - 1) * pageSize;
  let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
  // create an array of pages to ng-repeat in the pager control
  let pages = Array.from(Array(endPage + 1 - startPage).keys()).map(i => startPage + i);
  // return object with all pager properties required by the view
  return {
    pages,
    endPage,
    endIndex,
    pageSize,
    startPage,
    totalPages,
    startIndex,
    totalItems,
    currentPage,
  };
}

const gascoPaginatorCss = ":host{display:block;padding:17px;background:#FFFFFF;border:1.5px solid #EBEBEB;flex-grow:1;width:100%;max-width:100%}:host(.gasco-paginator.paginator-with-select){display:flex;justify-content:flex-end;gap:1rem}:host(.gasco-paginator.paginator-with-select) .gasco-select{max-width:100px}:host(.gasco-paginator.paginator-with-select) .select-native :host(gasco-input){margin-bottom:0}:host(.gasco-paginator.paginator-with-select) .paginator-select{display:flex;align-items:center;justify-content:end;flex:1 1;gap:1rem}:host(.gasco-paginator.paginator-with-select) .paginator-select span{font-weight:400;font-size:16px;line-height:24px;color:#072531}:host(.gasco-paginator.paginator-with-select) .paginator-select .select-wrap{position:relative;max-width:80px;width:100%}:host(.gasco-paginator.paginator-with-select) .paginator-select .select-wrap>gasco-list{position:absolute;width:100%;top:3rem;z-index:100}:host(.gasco-paginator.paginator-with-select) .paginator-select .select-button{position:relative;border:1px solid var(--gasco-color-primary, #00A3E0);border-radius:4px;width:100%;text-align:initial;padding-left:11px;padding-right:11px;padding-top:4px;padding-bottom:4px;font-weight:400;font-size:16px;line-height:24px;color:#072531}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.gasco-paginator.paginator-with-select) .paginator-select .select-button{padding-left:unset;padding-right:unset;-webkit-padding-start:11px;padding-inline-start:11px;-webkit-padding-end:11px;padding-inline-end:11px}}:host(.gasco-paginator.paginator-with-select) .paginator-select .select-button::after{position:absolute;content:\"\";width:0.8em;height:0.5em;top:10px;right:10px;background-color:var(--gasco-color-primary, #00A3E0);clip-path:polygon(100% 0%, 0 0%, 50% 100%);transition:300ms}:host(.gasco-paginator.paginator-with-select) .paginator-select .select-button:focus::after{transform:rotate(180deg)}:host button{cursor:pointer;border:none;background:transparent;display:inline-block}:host .paginator-pages{display:flex;justify-content:flex-end;align-items:center}:host .paginator-pages .wrap-buttons{display:flex}:host .paginator-pages .wrap-buttons button{display:flex;padding:6px 2px;align-items:center;transition:300ms;border-radius:4px}:host .paginator-pages .wrap-buttons button:hover{background:var(--gasco-color-light, #F1F1F1)}:host .paginator-pages .wrap-indicator{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;display:flex;gap:8px;direction:ltr}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .paginator-pages .wrap-indicator{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .paginator-pages .wrap-indicator .paginator-indicator{position:relative;padding:2px 8px;user-select:none;z-index:1;transition:all 0.1s linear}:host .paginator-pages .wrap-indicator .paginator-indicator:hover::after{background:var(--gasco-color-light, #F1F1F1)}:host .paginator-pages .wrap-indicator .paginator-indicator.active-indicator{color:#ffffff !important}:host .paginator-pages .wrap-indicator .paginator-indicator.active-indicator::after{background:var(--gasco-color-primary, #00A3E0)}:host .paginator-pages .wrap-indicator .paginator-indicator.disabled{cursor:default;color:#bbb}:host .paginator-pages .wrap-indicator .paginator-indicator.disabled:hover{border-color:#fafafa}:host .paginator-pages .wrap-indicator .paginator-indicator::after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .paginator-pages .wrap-indicator .paginator-indicator::after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}@media only screen and (max-width: 670px){:host(.gasco-paginator.paginator-with-select){flex-direction:column;align-items:center;gap:1rem}:host(.gasco-paginator.paginator-with-select) .paginator-select{width:100%;justify-content:center;flex-wrap:wrap}:host(.gasco-paginator.paginator-with-select) .paginator-select span{font-size:14px;line-height:20px}:host .paginator-pages .wrap-indicator .paginator-indicator{font-size:10px}}@media only screen and (max-width: 320px){:host(.gasco-paginator.paginator-with-select){padding-inline:0 !important}:host(.gasco-paginator.paginator-with-select) .paginator-select{width:initial}}";

const GascoPaginator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.sizeChanged = createEvent(this, "sizeChanged", 7);
    this.gascoChange = createEvent(this, "gascoChange", 7);
    this.gascoReady = createEvent(this, "gascoReady", 7);
    this.pages = [];
    this.start = 1;
    this.pageCount = 0;
    this.currentPage = 1;
    this.pageSize = 10;
    this.countPaginatorStart = 0;
    this.countPaginatorEnd = 3;
    this.isExpanded = false;
  }
  componentWillLoad() {
    if (this.totalItems) {
      this.getTotalItemCount(this.totalItems);
      const { currentPage, pageSize } = this.getTotalItemCount(this.totalItems);
      this.end = currentPage * pageSize;
    }
    if (document.documentElement.clientWidth > 480) {
      this.displayedPagesLarge();
    }
    else {
      this.displayedPagesSmall();
    }
    this.gascoReady.emit(Object.assign(Object.assign({}, this), { start: this.start, end: this.end }));
  }
  handleItemCount(current) {
    this.getTotalItemCount(current);
  }
  getTotalItemCount(current) {
    const { totalPages, pages, currentPage, pageSize } = paginate(current, this.currentPage, this.pageSize);
    this.pages = pages;
    this.pageCount = totalPages;
    return {
      pageSize,
      currentPage
    };
  }
  getPageSelect() {
    const pageSelects = this.suggestionList
      ? this.suggestionList.map((s) => {
        return s;
      })
      : [];
    return pageSelects;
  }
  handleSelect(event, index) {
    event.preventDefault();
    this.currentPage = index;
    if (this.currentPage <= this.pageCount) {
      if (this.currentPage === 2) {
        this.start = this.currentPage * (this.pageSize / 2) + 1;
        this.end = this.currentPage * (this.pageSize / 2) + this.pageSize;
      }
      else {
        this.start = (this.currentPage - 1) * this.pageSize + 1;
        this.end = (this.currentPage - 1) * this.pageSize + this.pageSize;
      }
      this.end = this.currentPage === this.pageCount ? this.totalItems : this.end;
      if (this.end !== this.pageCount) {
        this.gascoChange.emit({ current: index, start: this.start, end: this.end });
      }
    }
    event.stopPropagation();
  }
  handlePageSize(current) {
    this.pageSize = current;
    this.end = (this.currentPage - 1) * current + current;
    this.getTotalItemCount(this.totalItems);
    this.gascoChange.emit({ current: this.currentPage, start: this.start, end: this.end });
  }
  handlePageSizeChange(event, value) {
    event.preventDefault();
    this.pageSize = value;
    event.stopPropagation();
  }
  handleResizePaginator() {
    if (document.documentElement.clientWidth > 480) {
      return this.displayedPagesLarge();
    }
    else {
      return this.displayedPagesSmall();
    }
  }
  displayedPagesLarge() {
    // if currentPage is currentPage 1
    if (this.currentPage === 1) {
      return this.pages.slice(this.currentPage - 1, this.currentPage + 2);
    }
    // if currentPage is the last currentPage
    else if (this.currentPage === this.pages.length) {
      return this.pages.slice(this.currentPage - 2, this.currentPage + 1);
    }
    // if currentPage is between 4-7
    else if (this.currentPage >= 4 && this.currentPage <= 7) {
      return this.pages.slice(this.currentPage - 2, this.currentPage + 1);
    }
    // if currentPage more than 7
    else if (this.currentPage > 7) {
      return this.pages.slice(this.currentPage - 2, this.currentPage + 1);
    }
    // if currentPage less than 4
    else {
      return this.pages.slice(this.currentPage - 1, this.currentPage + 2);
    }
  }
  displayedPagesSmall() {
    return this.pages.slice(this.currentPage - 1, this.currentPage + 1);
  }
  renderPaginate() {
    return (h("div", { class: "paginator-pages" }, h("div", { class: "wrap-indicator" }, h("button", { disabled: this.currentPage <= 2, onClick: e => {
        const current = this.currentPage -= 2;
        this.handleSelect(e, current);
      } }, h("ion-icon", { icon: playBackOutline, lazy: false, flipRtl: true })), h("button", { disabled: this.currentPage === 1, onClick: e => {
        const current = this.currentPage -= 1;
        this.handleSelect(e, current);
      } }, h("ion-icon", { icon: chevronBack, lazy: false, flipRtl: true })), document.documentElement.clientWidth > 480 && (this.currentPage > 3 && (h(Fragment, null, h("button", { class: "paginator-indicator", onClick: e => {
        const current = this.currentPage = 1;
        this.handleSelect(e, current);
      } }, this.pages[0]), h("span", null, "...")))), this.handleResizePaginator().map(index => (h("button", { class: {
        ['paginator-indicator']: true,
        ['active-indicator']: this.currentPage === index
      }, onClick: e => {
        const current = this.currentPage = index;
        this.handleSelect(e, current);
      } }, index))), this.currentPage < this.pages.length - 2 && h("span", null, "..."), this.currentPage < this.pages.length - 2 && (h("button", { class: "paginator-indicator", onClick: e => {
        const current = this.currentPage = this.pages.length;
        this.handleSelect(e, current);
      } }, this.pages[this.pages.length - 1])), h("button", { disabled: this.currentPage === this.pages[this.pages.length - 1], onClick: e => {
        const current = this.currentPage += 1;
        this.handleSelect(e, current);
      } }, h("ion-icon", { icon: chevronForward, lazy: false, flipRtl: true })), h("button", { disabled: this.currentPage >= this.pages[this.pages.length - 2], onClick: e => {
        const current = this.currentPage += 2;
        this.handleSelect(e, current);
      } }, h("ion-icon", { icon: playForwardOutline, lazy: false, flipRtl: true })))));
  }
  renderChoice() {
    const choice = this.getPageSelect().map(n => (h("gasco-item", { onClick: (e) => this.handlePageSizeChange(e, n) }, n)));
    return this.getPageSelect().length > 0 && (h("div", { class: "paginator-select" }, h("span", null, "Filas por p\u00E1gina:"), h("div", { class: "select-wrap" }, h("button", { class: "select-button", onBlur: () => setTimeout(() => this.isExpanded = false, 200), onFocus: () => this.isExpanded = true }, this.pageSize), this.isExpanded && (h("gasco-list", null, choice))), h("span", { class: "paginator-counts" }, this.start, " - ", this.currentPage === this.pages[this.pageCount] ? this.totalItems : this.end, " de ", this.totalItems)));
  }
  render() {
    return (h(Host, Object.assign({}, this.htmlAttributes, { class: {
        'gasco-paginator': true,
        'paginator-with-select': this.getPageSelect().length > 0
      } }), this.renderChoice(), this.renderPaginate()));
  }
  get el() { return this; }
  static get watchers() { return {
    "totalItems": ["handleItemCount"],
    "pageSize": ["handlePageSize"]
  }; }
  static get style() { return gascoPaginatorCss; }
}, [1, "gasco-paginator", {
    "currentPage": [1538, "current-page"],
    "pageSize": [1538, "page-size"],
    "suggestionList": [1040],
    "totalItems": [514, "total-items"],
    "htmlAttributes": [16],
    "countPaginatorStart": [32],
    "countPaginatorEnd": [32],
    "isExpanded": [32]
  }, [[9, "resize", "handleResizePaginator"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gasco-paginator", "gasco-item", "gasco-list", "ion-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "gasco-paginator":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GascoPaginator);
      }
      break;
    case "gasco-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "gasco-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "ion-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { GascoPaginator as G, defineCustomElement as d };
