'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-22fd9091.js');
const core = require('./core-787915c4.js');
require('./_commonjsHelpers-5cfcba41.js');
require('./index-a20d8492.js');
const runStore = require('./runStore-bfd81991.js');
const authStore = require('./authStore-cabcfab4.js');
const index$1 = require('./index-66ca60fa.js');
const Mutations = require('./Mutations-7f7eb38b.js');

const CorejamButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.display = "flex";
    this.justify = "center";
    this.outline = "none";
    this.hoverOutline = "none";
    this.focusOutline = "none";
    //@todo fix these wrong types
    this.type = "button";
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await Promise.resolve().then(function () { return require('./style-2b3a6185.js'); }).then(function (n) { return n.style; })).calculateStyles(this);
    this.hash = hash;
  }
  render() {
    const Tag = this.type;
    return (index.h(Tag, { class: this.hash }, index.h("slot", null)));
  }
  static get watchers() { return {
    "display": ["computeStyles"],
    "w": ["computeStyles"],
    "smW": ["computeStyles"],
    "mdW": ["computeStyles"],
    "lgW": ["computeStyles"],
    "xlW": ["computeStyles"],
    "bg": ["computeStyles"],
    "hoverBg": ["computeStyles"],
    "focusBg": ["computeStyles"],
    "color": ["computeStyles"],
    "hoverColor": ["computeStyles"],
    "focusColor": ["computeStyles"],
    "p": ["computeStyles"],
    "pl": ["computeStyles"],
    "pr": ["computeStyles"],
    "pt": ["computeStyles"],
    "pb": ["computeStyles"],
    "outline": ["computeStyles"],
    "hoverOutline": ["computeStyles"],
    "focusOutline": ["computeStyles"],
    "transition": ["computeStyles"]
  }; }
};

const IconsAccount = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h("svg", { class: "self-end", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("path", { class: "heroicon-ui", d: "M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z" })));
  }
};

const CorejamIdentity = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.formId = "identity";
    this.loginLink = "/login/";
    this.registerLink = "/register/";
    this.dropdown = false;
    this.toggleMenu = () => {
      this.dropdown = !this.dropdown;
    };
    this.logOut = () => {
      this.toggleMenu();
      authStore.authStore.identity = null;
    };
  }
  handleClick(ev) {
    let shouldClose = true;
    //Check if dropdown is open
    if (this.dropdown) {
      //Check if path doesnt have identity component in it
      ev.composedPath().forEach((element) => {
        if (element === this.element) {
          shouldClose = false;
        }
      });
      //Close it if it doesnt
      if (shouldClose) {
        this.toggleMenu();
      }
    }
  }
  componentWillLoad() {
    this.setRefreshTimer();
  }
  /**
   * Based on the token expiry we send a refresh request which
   * includes the refreshToken from cookies
   */
  setRefreshTimer() {
    setTimeout(() => {
      console.log("Refreshing token");
    }, 10000); //Time needs to come from this.token.expiry
  }
  async formEventHandler({ detail }) {
    if (detail.formId != this.formId || authStore.authStore.identity)
      return;
    const request = await core.coreState.client.mutate({
      mutation: index$1.src(Mutations.userAuthenticateMutationGQL),
      variables: {
        email: detail.email.value,
        password: detail.password.value,
      },
    });
    if (request.data.userAuthenticate) {
      this.toggleMenu();
      authStore.authStore.identity = request.data.userAuthenticate;
      runStore.runState.router.push("/");
    }
  }
  render() {
    return (index.h(index.Host, null, index.h("corejam-box", { position: "relative", flex: true, direction: "row", justify: "end" }, authStore.authStore.identity ? (index.h("corejam-box", { pr: 3 }, index.h("corejam-type", { "data-cy": "identity-email" }, authStore.authStore.identity.user.email))) : null, index.h("corejam-icons-account", { onClick: () => this.toggleMenu() }), index.h("corejam-box", { bg: "white", shadow: "0px 0px 10px rgba(0, 0, 0, 0.1)", position: "absolute", top: 30, right: 5, p: 4, rounded: "md", w: "250px", style: { display: this.dropdown ? "initial" : "none" } }, authStore.authStore.identity ? (index.h("corejam-box", { w: "12", flex: true, direction: "col" }, index.h("corejam-box", null, index.h("corejam-base-link", { href: "/account" }, "My Account")), index.h("corejam-box", { onClick: () => {
        this.logOut();
      } }, "Log out"))) : (index.h("corejam-form-container", { name: this.formId }, index.h("corejam-flash", { "data-flash": "isolated" }), index.h("corejam-box", { pb: 3, flex: true, direction: "col" }, index.h("corejam-box", { w: "12" }, index.h("corejam-form-input", { name: "email", type: "text", formId: this.formId, label: "Email" }), index.h("corejam-form-input", { name: "password", type: "password", formId: this.formId, label: "Password" })), index.h("corejam-box", { flex: true, direction: "row", w: "12", mt: 4 }, index.h("corejam-box", { w: "6", bg: "gray-200", rounded: "md", flex: true, justify: "center" }, index.h("corejam-form-submit", { formId: this.formId }, index.h("corejam-button", { type: "button", color: "gray-900", pl: "5", pr: "5", pt: "3", pb: "3" }, index.h("corejam-type", null, "Login")))), index.h("corejam-box", { w: "6", flex: true, justify: "center", items: "center" }, index.h("corejam-base-link", { href: "/register" }, "Register"))))))))));
  }
  get element() { return index.getElement(this); }
};

exports.corejam_button = CorejamButton;
exports.corejam_icons_account = IconsAccount;
exports.corejam_identity = CorejamIdentity;
