import { coreState } from "@corejam/core-components";
import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
import gql from "graphql-tag";
import { paginateUsersGQL } from "../../../shared/graphql/Queries";
import { authStore } from "../../store/authStore";
export class AuthAdminUserList {
  constructor() {
    this.activePage = 1;
    this.tableHeader = ["Email", "Role", "Status", "Date Created"];
  }
  rerenderForPage() {
    this.queryData();
  }
  async queryData() {
    const request = await coreState.client.query({
      query: gql(paginateUsersGQL),
      variables: {
        page: this.page,
        size: 15,
      },
    });
    this._data = request.data.paginateUsers;
  }
  async componentWillRender() {
    if (authStore.identity)
      await this.queryData();
  }
  render() {
    if (!authStore.identity)
      return h("corejam-box", { mx: "auto" }, "Not authorized");
    return (h(Host, null,
      h("corejam-box", { max: "xl", flex: true, direction: "col", mx: "auto" },
        h("corejam-box", null,
          h("corejam-type", { as: "h2", size: "xl" }, "Users")),
        h("corejam-box", { flex: true, direction: "col" },
          h("corejam-box", { px: 5, bColor: "gray-300", bWidth: 1, flex: true, pt: 3, pb: 3 }, this.tableHeader.map((header, i) => (h("corejam-box", { w: "3", key: i }, header)))),
          this._data.items.map((user, i) => {
            let bg = "";
            if (i % 2 == 0) {
              bg = "lightBlue-900";
            }
            return (h("corejam-box", { px: 5, bg: bg, bStyle: "solid", bColor: "gray-300", bWidth: 1, flex: true, pt: 3, pb: 3 },
              h("corejam-box", { w: "3" },
                h("corejam-base-link", { "data-cy": "user-link", href: `/admin/users/edit/${user.id}` },
                  h("corejam-type", null, user.email))),
              h("corejam-box", { w: "3" }, user.role),
              h("corejam-box", { w: "3" }, user.active),
              h("corejam-box", { w: "3" }, user.dateCreated)));
          })),
        h("corejam-box", { px: 5, bColor: "gray-300", bWidth: 1, flex: true, justify: "between", pt: 3, pb: 3 },
          "Showing ",
          this._data.items.length,
          " of ",
          this._data.totalItems,
          " entries",
          h("corejam-pagination", { paginator: this._data })))));
  }
  static get is() { return "auth-admin-user-list"; }
  static get properties() { return {
    "data": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "data",
      "reflect": false
    },
    "page": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "page",
      "reflect": false
    }
  }; }
  static get states() { return {
    "_data": {},
    "activePage": {}
  }; }
  static get watchers() { return [{
      "propName": "page",
      "methodName": "rerenderForPage"
    }]; }
}
