import { coreState } from "@corejam/core-components";
import { runState } from "@corejam/run";
import { Component, Fragment, h, Host, Listen, State } from "@stencil/core";
import gql from "graphql-tag";
import { passwordResetGQL, requestPasswordResetGQL } from "../../../shared/graphql/Mutations";
export class Reset {
  constructor() {
    this.resetEmailFormId = "resetEmail";
    this.resetPasswordFormId = "resetPassword";
    this.resetRequested = false;
    this.resetWithToken = false;
    this.resetCompleted = false;
    this.token = null;
  }
  async formEventHandler({ detail }) {
    if (detail.formId == this.resetEmailFormId)
      return this.requestReset(detail);
    if (detail.formId == this.resetPasswordFormId)
      return this.resetPassword(detail);
  }
  async componentDidRender() {
    const reset = new URLSearchParams(location.search).get("reset");
    if (reset) {
      this.token = reset;
      this.resetWithToken = true;
    }
  }
  async requestReset(detail) {
    const userInput = {};
    Object.keys(detail).map((value) => {
      if (detail[value].key) {
        userInput[detail[value].key] = detail[value].value;
      }
    });
    const request = await coreState.client.mutate({
      mutation: gql(requestPasswordResetGQL),
      variables: userInput,
    });
    if (request.data.userRequestPasswordReset) {
      this.resetRequested = true;
    }
  }
  async resetPassword(detail) {
    const userInput = {};
    Object.keys(detail).map((value) => {
      if (detail[value].key) {
        userInput[detail[value].key] = detail[value].value;
      }
    });
    const request = await coreState.client.mutate({
      mutation: gql(passwordResetGQL),
      variables: {
        token: this.token,
        resetInput: userInput,
      },
    });
    if (request.data.userResetPassword) {
      this.resetCompleted = true;
      runState.router.push("/login");
    }
  }
  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" }, this.resetWithToken == false ? (h(Fragment, null, this.resetRequested == false ? (h(Fragment, null,
          h("corejam-box", { bWidthBottom: 1, bColor: "gray-400", mb: 8, mt: 12 },
            h("corejam-type", { as: "h3", size: "xl" }, "Reset Password")),
          h("corejam-form-container", { name: this.resetEmailFormId },
            h("corejam-form-input", { name: "email", type: "text", formId: this.resetEmailFormId, label: "Your Email", placeholder: "Your email" }),
            h("corejam-base-link", { href: "#" },
              h("corejam-form-submit", { formId: this.resetEmailFormId },
                h("corejam-type", { size: "sm", weight: "bold", transform: "uppercase", decoration: "underline" }, "Reset")))))) : (h("corejam-modal", { message: "Please check your mail", type: "success" })))) : (h(Fragment, null, this.resetCompleted == false ? (h(Fragment, null,
          h("corejam-box", { bWidthBottom: 1, bColor: "gray-400", mb: 8, mt: 12 },
            h("corejam-type", { as: "h3", size: "xl" }, "Update Password")),
          h("corejam-form-container", { name: this.resetPasswordFormId },
            h("corejam-box", { flex: true, mb: 8 },
              h("corejam-form-input", { name: "password", type: "password", formId: this.resetPasswordFormId, label: "Password", placeholder: "Password" })),
            h("corejam-box", { flex: true, mb: 8 },
              h("corejam-form-input", { name: "passwordConfirm", type: "password", formId: this.resetPasswordFormId, label: "Confirm Password", placeholder: "Confirm Password" })),
            h("corejam-base-link", { href: "#" },
              h("corejam-form-submit", { formId: this.resetPasswordFormId },
                h("corejam-type", { size: "sm", weight: "bold", transform: "uppercase", decoration: "underline" }, "Reset")))))) : (h("corejam-type", null, "Please check your mail"))))))));
  }
  static get is() { return "auth-reset"; }
  static get states() { return {
    "resetRequested": {},
    "resetWithToken": {},
    "resetCompleted": {},
    "token": {}
  }; }
  static get listeners() { return [{
      "name": "sendForm",
      "method": "formEventHandler",
      "target": "window",
      "capture": false,
      "passive": false
    }]; }
}
