import { h, Host } from "@stencil/core";
/**
 * Pagination component. Either provide numbers or query result to display the component.
 *
 * @cssprop --klevu-pagination-background-color --klevu-color-dim-background background color of item
 * @cssprop --klevu-pagination-text-color - text color of item
 * @cssprop --klevu-pagination-selected-background-color --klevu-color-primary background color of selected item
 * @cssprop --klevu-pagination-selected-text-color --klevu-color-primary-text text color of selected item
 */
export class KlevuPagination {
  constructor() {
    this.current = undefined;
    this.min = undefined;
    this.max = undefined;
    this.queryResult = undefined;
  }
  render() {
    let min, max, current;
    if (this.queryResult) {
      min = 1;
      max = Math.floor(this.queryResult.meta.totalResultsFound / this.queryResult.meta.noOfResults) + 1;
      current = Math.floor(this.queryResult.meta.offset / this.queryResult.meta.noOfResults) + 1;
    }
    else {
      if ([this.current, this.max, this.min].some((i) => i === undefined)) {
        throw new Error("queryResult or current, min & max needs to be defined");
      }
      min = this.min;
      max = this.max;
      current = this.current;
    }
    let pages = [];
    for (let i = min; i <= max; i++) {
      pages.push(i);
    }
    if (pages.length > 8) {
      let startIndex = min + 1;
      let endIndex = max - 1;
      let currentStartIndex = current > 3 ? current - 1 : 0;
      let currentEndIndex = current < endIndex - 1 ? currentStartIndex + 2 : endIndex - 1;
      if (currentStartIndex < startIndex) {
        currentStartIndex = startIndex + 1;
        currentEndIndex = currentStartIndex + 2;
      }
      pages = [];
      for (let i = min; i <= startIndex; i++) {
        pages.push(i);
      }
      if (startIndex + 1 < currentStartIndex) {
        pages.push(-1);
      }
      for (let i = currentStartIndex; i <= currentEndIndex; i++) {
        pages.push(i);
      }
      if (currentEndIndex + 1 < endIndex) {
        pages.push(-1);
      }
      for (let i = endIndex; i <= max; i++) {
        pages.push(i);
      }
    }
    return (h(Host, null, h("klevu-icon", { class: {
        disabled: current === min,
      }, onClick: () => current !== min && this.klevuPaginationChange.emit(current - 1), name: "navigate_before" }), pages.map((i) => {
      if (i == -1) {
        return h("span", { class: "disabled dots" }, "...");
      }
      return (h("span", { class: {
          current: current === i,
        }, onClick: () => current !== i && this.klevuPaginationChange.emit(i) }, i));
    }), h("klevu-icon", { class: {
        disabled: current === max,
      }, onClick: () => current !== max && this.klevuPaginationChange.emit(current + 1), name: "navigate_next" })));
  }
  static get is() { return "klevu-pagination"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-pagination.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-pagination.css"]
    };
  }
  static get properties() {
    return {
      "current": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Current page"
        },
        "attribute": "current",
        "reflect": false
      },
      "min": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Min page"
        },
        "attribute": "min",
        "reflect": false
      },
      "max": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Max page"
        },
        "attribute": "max",
        "reflect": false
      },
      "queryResult": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "KlevuQueryResult",
          "resolved": "undefined | { id: string; filters?: (KlevuFilterResultOptions | KlevuFilterResultSlider | KlevuFilterResultRating)[] | undefined; meta: { apiKey: string; isPersonalised: boolean; qTime: number; noOfResults: number; totalResultsFound: number; offset: number; typeOfSearch: KlevuTypeOfSearch; debuggingInformation: unknown; notificationCode: number; searchedTerm: string; klevuImageData?: { processed: { urls: string[]; }[]; } | undefined; }; records: ({ id: string; } & KlevuRecord)[]; }",
          "references": {
            "KlevuQueryResult": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::KlevuQueryResult"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Query results used to build min, max and current"
        }
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuPaginationChange",
        "name": "klevuPaginationChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Page that was changed into"
        },
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        }
      }];
  }
}
//# sourceMappingURL=klevu-pagination.js.map
