import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { useState } from "@saasquatch/universal-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { intl } from "../../global/global";
import { getProps } from "../../utils/utils";
import { PaginationView } from "./sqm-pagination-view";
import { usePagination } from "./usePagination";
/**
 * @uiName Pagination
 */
export class Pagination {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Pagination text
     */
    this.paginationText = "{currentPage} of {totalPages}";
    /**
     * The type of the button that is used (primary or secondary).
     * @uiName Button Type
     * @uiType string
     * @uiEnum ["primary", "secondary"]
     * @uiEnumNames ["Primary", "Secondary"]
     * @uiGroup Style
     */
    this.buttonType = "secondary";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const hookProps = isDemo()
      ? useDemoPagination(getProps(this))
      : usePagination(getProps(this));
    return h(PaginationView, Object.assign({}, hookProps));
  }
  static get is() { return "sqm-pagination"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "paginationText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Pagination text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "pagination-text",
      "reflect": false,
      "defaultValue": "\"{currentPage} of {totalPages}\""
    },
    "buttonType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"primary\" | \"secondary\"",
        "resolved": "\"primary\" | \"secondary\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button Type",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"primary\", \"secondary\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Primary\", \"Secondary\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "The type of the button that is used (primary or secondary)."
      },
      "attribute": "button-type",
      "reflect": false,
      "defaultValue": "\"secondary\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<UsePagination>",
        "resolved": "{}",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "UsePagination": {
            "location": "import",
            "path": "./usePagination"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useDemoPagination(props) {
  const [currentPage, setCurrentPage] = useState(1);
  return deepmerge({
    states: {
      currentPage,
      totalPages: 5,
      loading: false,
    },
    buttonType: props.buttonType,
    callbacks: {
      onNext: () => setCurrentPage(currentPage + 1),
      onPrev: () => setCurrentPage(currentPage - 1),
    },
    text: {
      paginationText: intl.formatMessage({
        id: `paginationText`,
        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
      }, {
        currentPage: currentPage,
        totalPages: 5,
      }),
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
