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 { userAuthenticateMutationGQL } from "../../../shared/graphql/Mutations";
import { authStore } from "../../store/authStore";
export class LoginForm {
  constructor() {
    this.formId = "login";
  }
  componentWillLoad() {
    if (authStore.identity)
      runState.router.push("/");
  }
  async formEventHandler({ detail }) {
    if (detail.formId != this.formId)
      return;
    const request = await coreState.client.mutate({
      mutation: gql(userAuthenticateMutationGQL),
      variables: {
        email: detail.email.value,
        password: detail.password.value,
      },
    });
    if (request.data.userAuthenticate) {
      authStore.identity = request.data.userAuthenticate;
      this.onSuccess ? this.onSuccess() : runState.router.push("/");
    }
    else {
      this.onFail ? this.onFail() : null;
    }
  }
  render() {
    return (h(Host, null,
      h("corejam-box", { p: 8, max: "md", mx: "auto", px: 4, lgPx: 0, flex: true, direction: "col", justify: "between", mb: 24 },
        h("corejam-flash", null),
        h("corejam-box", { w: "5", mx: "auto" },
          h("corejam-form-container", { name: this.formId },
            h("corejam-box", null,
              h("corejam-form-input", { name: "email", type: "text", 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", { flex: true, direction: "col" },
                h("corejam-box", null,
                  h("corejam-form-submit", { formId: this.formId },
                    h("button", { type: "submit" }, "Login"))),
                h("corejam-box", null,
                  h("corejam-base-link", { href: "/login/reset" }, "Reset Password")))))))));
  }
  static get is() { return "auth-form-login"; }
  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
    }]; }
}
