import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import * as gracely from "gracely";
import { Notice } from "smoothly";
import { User } from "@payfunc/model";
import { PayfuncPortal } from "../index";
import * as translation from "./translation";
export class PortalLogin {
  componentWillLoad() {
    var _a;
    this.t = translation.create(this.element);
    this.done = !!((_a = PayfuncPortal.client) === null || _a === void 0 ? void 0 : _a.me.user);
  }
  async attemptLogin(e) {
    if (PayfuncPortal.client)
      PayfuncPortal.client.me.onUnauthorized = async () => {
        var _a, _b, _c;
        const result = await ((_a = PayfuncPortal.client) === null || _a === void 0 ? void 0 : _a.me.login((_b = e.detail.user) !== null && _b !== void 0 ? _b : "", (_c = e.detail.password) !== null && _c !== void 0 ? _c : ""));
        if (User.is(result)) {
          this.userChanged.emit({ user: result });
          this.done = true;
        }
        else
          this.notice.emit(Notice.failed(this.t("Login failed. Make sure email and password are correct.")));
        return !gracely.Error.is(result);
      };
  }
  render() {
    const t = this.t;
    return [
      h("smoothly-dialog", { open: this.done != true, header: "PayFunc Portal" },
        h("form", null,
          h("smoothly-input", { style: { borderBottom: "none" }, type: "email", name: "user" }, t("Email")),
          h("smoothly-input", { type: "password", name: "password" }, t("Password")),
          h("smoothly-submit", { color: "success", prevent: true, expand: "block", onSubmit: (e) => this.attemptLogin(e) }, t("Log in")))),
      h("slot", null),
    ];
  }
  static get is() { return "portal-login"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "server": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "server",
      "reflect": false
    }
  }; }
  static get states() { return {
    "t": {},
    "done": {}
  }; }
  static get events() { return [{
      "method": "notice",
      "name": "notice",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Notice",
        "resolved": "Notice",
        "references": {
          "Notice": {
            "location": "import",
            "path": "smoothly"
          }
        }
      }
    }, {
      "method": "userChanged",
      "name": "userChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ user: User }",
        "resolved": "{ user: User; }",
        "references": {
          "User": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
