import { Build, Component, Event, h, Listen, Prop, State, } from "@stencil/core";
import state from "../../../store";
export class AppLogin {
  constructor() {
    this.isUsingEmail = false;
    this.isLoading = false;
    this.bannerImage = "/assets/images/logo-full.png";
    this.error = false;
    this.speech = "Hi there, I'm FloodBot, let's get you logged in.";
  }
  async login(event, type = "email") {
    var _a, _b;
    this.error = "";
    this.email = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.email;
    this.speech =
      type === "email"
        ? `I sent you an email login link to ${this.email}, click on the link
    in the email to finish logging in.`
        : `Logging you in via ${type.charAt(0).toUpperCase() + type.substring(1)}, please follow the promps in the pop-up window.`;
    this.fireenjinTrigger.emit({
      name: "login",
      payload: {
        type,
        email: this.email,
      },
    });
    if (type === "email")
      this.emailSent = true;
  }
  showLoginButtons() {
    this.speech = "Hi there, I'm FloodBot, let's get you logged in.";
    this.isUsingEmail = false;
    this.emailSent = false;
  }
  showLoginForm() {
    this.speech = `Enter your email address and I will send you an email login link.`;
    this.isUsingEmail = true;
  }
  async componentDidLoad() {
    var _a;
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    if ((_a = state === null || state === void 0 ? void 0 : state.session) === null || _a === void 0 ? void 0 : _a.uid) {
      const routerEl = document.querySelector("ion-router");
      routerEl.push("dashboard");
    }
    if (this.token)
      this.fireenjinTrigger.emit({
        name: "login",
        payload: {
          type: "token",
          token: this.token,
        },
      });
  }
  render() {
    return [
      h("ion-content", { class: "truck-background" },
        h("div", { class: "login-wrapper" },
          h("ion-icon", { class: "logo", src: "/assets/logo/logo.svg" }),
          this.emailSent ? (h("div", { class: "verification-sent" },
            h("div", { class: "icon-bubble" },
              h("ion-icon", { name: "mail" })),
            h("h2", null, "Email Sent!"),
            h("div", { class: "form-buttons" },
              h("ion-button", { fill: "clear", color: "medium", class: "cancel-button", onClick: () => this.showLoginButtons() }, "Cancel"),
              h("ion-button", { color: "secondary", onClick: () => this.login(event, "email") },
                "Resend Email",
                h("ion-icon", { slot: "end", name: "send" }))))) : this.isUsingEmail ? (h("ion-card", { class: {
              "login-wrap": true,
              "is-loading": this.isLoading,
            } },
            h("fireenjin-form", { name: "login", class: "creds-login", hideControls: true },
              this.error ? (h("div", { class: "error-msg" },
                h("ion-icon", { name: "alert" }),
                this.error)) : null,
              h("fireenjin-input", { ref: (el) => (this.emailInputEl = el), id: "email-input", label: "Email Address", labelPosition: "stacked", value: this.email, name: "email", required: true }),
              h("div", { class: "form-buttons" },
                h("ion-button", { fill: "clear", color: "medium", onClick: () => this.showLoginButtons() }, "Cancel"),
                h("ion-button", { color: "secondary", class: "submit-button", type: "submit" },
                  "Send Email",
                  h("ion-icon", { slot: "end", name: "send" })))))) : (h("ion-list", { id: "login-types", lines: "none", class: "ion-padding-horizontal" },
            h("ion-item", null,
              h("ion-button", { expand: "block", onClick: (event) => this.login(event, "google") },
                h("ion-icon", { slot: "start", name: "logo-google" }),
                "Login with Google")),
            h("ion-item", null,
              h("ion-button", { expand: "block", onClick: () => this.showLoginForm() },
                h("ion-icon", { slot: "start", name: "mail" }),
                "Login with Email")))))),
    ];
  }
  static get is() { return "app-login"; }
  static get originalStyleUrls() { return {
    "$": ["app-login.css"]
  }; }
  static get styleUrls() { return {
    "$": ["app-login.css"]
  }; }
  static get properties() { return {
    "token": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "token",
      "reflect": false
    }
  }; }
  static get states() { return {
    "email": {},
    "isUsingEmail": {},
    "isLoading": {},
    "bannerImage": {},
    "error": {},
    "emailSent": {},
    "speech": {}
  }; }
  static get events() { return [{
      "method": "fireenjinTrigger",
      "name": "fireenjinTrigger",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FireEnjinTriggerInput",
        "resolved": "FireEnjinTriggerInput",
        "references": {
          "FireEnjinTriggerInput": {
            "location": "import",
            "path": "@fireenjin/sdk"
          }
        }
      }
    }]; }
  static get listeners() { return [{
      "name": "fireenjinSubmit",
      "method": "login",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
//# sourceMappingURL=app-login.js.map