import { Component, Event, Prop, h, Host, Watch, Element, State } from '@stencil/core';
import { chevronBack, chevronForward, playBackOutline, playForwardOutline } from 'ionicons/icons';
import paginate from './utils';
export class GascoPaginator {
  constructor() {
    this.pages = [];
    this.start = 1;
    this.pageCount = 0;
    this.currentPage = 1;
    this.pageSize = 10;
    this.countPaginatorStart = 0;
    this.countPaginatorEnd = 3;
  }
  componentWillLoad() {
    if (this.totalItems) {
      this.getTotalItemCount(this.totalItems);
      const { currentPage, pageSize } = this.getTotalItemCount(this.totalItems);
      this.end = currentPage * pageSize;
    }
    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({ value: index + 1, 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({ start: this.start, end: this.end });
  }
  handlePageSizeChange(event) {
    event.preventDefault();
    this.pageSize = event.target.value;
    event.stopPropagation();
  }
  displayedPages() {
    // 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);
    }
  }
  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 })),
        this.currentPage > 3 && (h("button", { class: "paginator-indicator", onClick: e => {
            const current = this.currentPage = 1;
            this.handleSelect(e, current);
          } }, this.pages[0])),
        this.currentPage > 3 && h("span", null, "..."),
        this.displayedPages().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("option", { value: n }, n.toString()));
    return this.getPageSelect().length > 0 && (h("div", { class: "paginator-select" },
      h("div", { class: "paginator-size" },
        h("span", null, "Mostrar"),
        h("select", { onChange: event => this.handlePageSizeChange(event) }, choice)),
      h("div", { 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 
          ${this.getPageSelect().length > 0 ? 'paginator-with-select' : ''}
        ` }),
      this.renderChoice(),
      this.renderPaginate()));
  }
  static get is() { return "gasco-paginator"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-paginator.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-paginator.css"]
  }; }
  static get properties() { return {
    "currentPage": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "current-page",
      "reflect": true,
      "defaultValue": "1"
    },
    "pageSize": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "page-size",
      "reflect": true,
      "defaultValue": "10"
    },
    "suggestionList": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "number[]",
        "resolved": "number[]",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "totalItems": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "total-items",
      "reflect": true
    },
    "htmlAttributes": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "{ [key: string]: any }",
        "resolved": "{ [key: string]: any; }",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Additional attributes to pass to the pagiantor."
      }
    }
  }; }
  static get states() { return {
    "countPaginatorStart": {},
    "countPaginatorEnd": {}
  }; }
  static get events() { return [{
      "method": "sizeChanged",
      "name": "sizeChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "gascoChange",
      "name": "gascoChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "PaginatorChangeEventDetail",
        "resolved": "PaginatorChangeEventDetail",
        "references": {
          "PaginatorChangeEventDetail": {
            "location": "import",
            "path": "../../interface"
          }
        }
      }
    }, {
      "method": "gascoReady",
      "name": "gascoReady",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "PaginatorReadyEventDetail",
        "resolved": "PaginatorReadyEventDetail",
        "references": {
          "PaginatorReadyEventDetail": {
            "location": "import",
            "path": "../../interface"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "totalItems",
      "methodName": "handleItemCount"
    }, {
      "propName": "pageSize",
      "methodName": "handlePageSize"
    }]; }
}
