import { coreState } from "@corejam/core-components";
import { Component, h, Listen } from "@stencil/core";
import gql from "graphql-tag";
import { userUpdatePasswordMutationGQL } from "../../../shared/graphql/Mutations";
export class AuthResetPasswordForm {
  constructor() {
    this.updatePasswordFormId = "updatePassword";
  }
  async formEventHandler({ detail }) {
    if (detail.formId != this.updatePasswordFormId)
      return;
    return this.updatePassword(detail);
  }
  async updatePassword(detail) {
    const userInput = {};
    Object.keys(detail).map((value) => {
      if (detail[value].key) {
        userInput[detail[value].key] = detail[value].value;
      }
    });
    await coreState.client.mutate({
      mutation: gql(userUpdatePasswordMutationGQL),
      variables: {
        userPasswordInput: userInput,
      },
    });
  }
  render() {
    return (h("corejam-box", 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.updatePasswordFormId },
        h("corejam-box", { flex: true, mb: 8 },
          h("corejam-box", { w: "6" },
            h("corejam-form-input", { name: "oldPassword", type: "password", formId: this.updatePasswordFormId, label: "Current Password", placeholder: "Current password" }))),
        h("corejam-box", { flex: true, mb: 8 },
          h("corejam-box", { w: "6" },
            h("corejam-form-input", { name: "password", type: "password", formId: this.updatePasswordFormId, label: "New Password", placeholder: "New password" }))),
        h("corejam-box", { flex: true, mb: 8 },
          h("corejam-box", { w: "6" },
            h("corejam-form-input", { name: "passwordConfirm", type: "password", formId: this.updatePasswordFormId, label: "Confirm Password", placeholder: "Confirm password" }))),
        h("corejam-form-submit", { formId: this.updatePasswordFormId },
          h("corejam-type", { size: "sm", weight: "bold", transform: "uppercase", decoration: "underline" }, "Save")))));
  }
  static get is() { return "auth-reset-password-form"; }
  static get listeners() { return [{
      "name": "sendForm",
      "method": "formEventHandler",
      "target": "window",
      "capture": false,
      "passive": false
    }]; }
}
