import { coreState } from "@corejam/core-components";
import { runState } from "@corejam/run";
import { Component, h, Host, Listen, Prop } from "@stencil/core";
import gql from "graphql-tag";
import { userRegisterMutationGQL } from "../../../shared/graphql/Mutations";
import { authStore } from "../../store/authStore";
export class RegisterForm {
  constructor() {
    this.formId = "register";
  }
  async formEventHandler({ detail }) {
    if (detail.formId != this.formId)
      return;
    const request = await coreState.client.mutate({
      mutation: gql(userRegisterMutationGQL),
      variables: {
        data: {
          email: detail.email.value,
          password: detail.password.value,
          passwordConfirm: detail.passwordConfirm.value,
        },
      },
    });
    if (request.data.userRegister) {
      this.onSuccess ? this.onSuccess() : runState.router.push("/login");
    }
    else {
      this.onFail ? this.onFail() : null;
    }
  }
  componentWillLoad() {
    if (authStore.identity)
      runState.router.push("/");
  }
  render() {
    return (h(Host, null,
      h("corejam-box", { p: 8, max: "md", mx: "auto", px: 4, lgPx: 0, flex: true, justify: "between", mb: 24 },
        h("corejam-box", { w: "5", mx: "auto" },
          h("corejam-form-container", { name: this.formId },
            h("corejam-box", null,
              h("corejam-form-input", { required: true, name: "email", type: "email", formId: this.formId, label: "Email" }),
              h("corejam-box", null,
                h("corejam-form-input", { name: "password", type: "password", formId: this.formId, label: "Password" })),
              h("corejam-box", null,
                h("corejam-form-input", { name: "passwordConfirm", type: "password", formId: this.formId, label: "Confirm Password" })),
              h("corejam-box", null,
                h("corejam-form-input", { type: "checkbox", formId: this.formId, label: "I agree to the terms & conditions" })),
              h("corejam-box", null,
                h("corejam-form-submit", { formId: this.formId },
                  h("button", { type: "submit" }, "Register")))))))));
  }
  static get is() { return "auth-form-register"; }
  static get properties() { return {
    "onSuccess": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Function",
        "resolved": "Function",
        "references": {
          "Function": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "onFail": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Function",
        "resolved": "Function",
        "references": {
          "Function": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get listeners() { return [{
      "name": "sendForm",
      "method": "formEventHandler",
      "target": "window",
      "capture": false,
      "passive": false
    }]; }
}
