import { coreState } from "@corejam/core-components";
import { Component, h, Host, Listen, Prop, State } from "@stencil/core";
import gql from "graphql-tag";
import { userEditMutationGQL } from "../../../shared/graphql/Mutations";
import { userByIdGQL } from "../../../shared/graphql/Queries";
import { authStore } from "../../store/authStore";
export class AdminUserForm {
  constructor() {
    this.error = false;
    this.user = null;
    this.userRoles = [
      { key: "admin", value: "admin" },
      { key: "user", value: "user" },
    ];
  }
  async formEventHandler({ detail }) {
    console.log("sendForm", detail);
    const input = {};
    Object.keys(detail).map((key) => {
      input[key] = detail[key].value;
    });
    await coreState.client.mutate({
      mutation: gql(userEditMutationGQL),
      variables: {
        id: this.formId,
        userInput: input,
      },
    });
  }
  async queryData() {
    const request = await coreState.client.query({
      query: gql(userByIdGQL),
      variables: {
        id: this.formId,
      },
    });
    if (request.data.userById) {
      this.user = request.data.userById;
      //Map over the roles and see if we match any we need to select
      this.userRoles.map((role) => {
        this.user.role.map((userRole) => {
          if (role.key === userRole)
            role["selected"] = true;
        });
      });
    }
  }
  async componentWillRender() {
    if (authStore.identity)
      await this.queryData();
  }
  render() {
    return (h(Host, null, authStore.identity ? (h("corejam-box", { p: 8, rounded: "md", bWidth: 1, bColor: "gray-200", max: "md", mx: "auto", px: 4, lgPx: 0, flex: true, justify: "between", mb: 24 },
      h("corejam-box", { w: "5", mx: "auto" },
        h("corejam-box", { pb: 4, mb: 8, bWidthBottom: 1, bColor: "gray-400" },
          h("corejam-type", { as: "h2", size: "xl" }, "User Edit")),
        h("corejam-form-container", { name: "userForm" },
          h("corejam-box", null,
            h("corejam-box", null,
              h("corejam-form-input", { name: "email", type: "text", formId: "userForm", value: this.user.email, label: "Email" })),
            h("corejam-box", null,
              h("corejam-form-input", { name: "active", type: "checkbox", formId: "userForm", label: "Active", checked: this.user.active })),
            h("corejam-box", null,
              h("corejam-form-select", { name: "roles", options: this.userRoles, multiple: true, formId: "userForm" })),
            h("corejam-box", null,
              h("corejam-form-input", { name: "password", type: "password", formId: "userForm", label: "Password" })),
            h("corejam-box", null,
              h("corejam-form-submit", { formId: "userForm" },
                h("button", { type: "submit" }, "Edit")))))))) : null));
  }
  static get is() { return "auth-admin-user-form"; }
  static get properties() { return {
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "error",
      "reflect": false,
      "defaultValue": "false"
    },
    "formId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "form-id",
      "reflect": false
    }
  }; }
  static get states() { return {
    "user": {}
  }; }
  static get listeners() { return [{
      "name": "sendForm",
      "method": "formEventHandler",
      "target": "window",
      "capture": false,
      "passive": false
    }]; }
}
