import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
export class CorejamPagination {
  constructor() {
    this._paginator = { currentPage: 1, lastPage: 5, items: [] };
  }
  watchPaginator() {
    this.setState();
  }
  setState() {
    if (this.paginator)
      this._paginator = typeof this.paginator === "string" ? JSON.parse(this.paginator) : this.paginator;
  }
  componentWillLoad() {
    this.setState();
  }
  renderPaginate() {
    const elements = [];
    for (let i = 1; i <= this._paginator.lastPage; i++) {
      const props = {
        color: "gray-400",
      };
      if (i === this._paginator.currentPage) {
        props["color"] = "gray-900";
      }
      elements.push(h("corejam-box", { px: 4, bWidthRight: 1, bColor: "gray-200" },
        h("corejam-base-link", { href: `${i}`, decoration: "none" },
          h("corejam-type", Object.assign({}, props), i.toString()))));
    }
    return elements;
  }
  render() {
    return (h(Host, null,
      h("corejam-box", { flex: true, w: "12", mt: 8, justify: "between", bWidthTop: 1, bColor: "gray-300", pt: 4 },
        h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" },
          h("path", { class: "heroicon-ui", d: "M5.41 11H21a1 1 0 0 1 0 2H5.41l5.3 5.3a1 1 0 0 1-1.42 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.42 1.4L5.4 11z" })),
        h("corejam-box", { flex: true, direction: "row" }, this.renderPaginate()),
        h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" },
          h("path", { class: "heroicon-ui", d: "M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z" })))));
  }
  static get is() { return "corejam-pagination"; }
  static get properties() { return {
    "paginator": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "paginator",
      "reflect": true
    }
  }; }
  static get states() { return {
    "_paginator": {}
  }; }
  static get watchers() { return [{
      "propName": "paginator",
      "methodName": "watchPaginator"
    }]; }
}
