import { r as registerInstance, h, H as Host, a as getElement } from './index-8dc1a0b7.js';
import { c as coreState } from './core-6e4b87fa.js';
import './_commonjsHelpers-66ac50f5.js';
import './index-2f7827f5.js';
import { r as runState } from './runStore-08a7baa7.js';
import { a as authStore } from './authStore-62b9ecb0.js';
import { s as src } from './index-313b8a90.js';
import { c as userAuthenticateMutationGQL } from './Mutations-823a697d.js';

const CorejamButton = class {
  constructor(hostRef) {
    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 import('./style-2713ffe3.js').then(function (n) { return n.s; })).calculateStyles(this);
    this.hash = hash;
  }
  render() {
    const Tag = this.type;
    return (h(Tag, { class: this.hash }, 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) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h("svg", { class: "self-end", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, 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) {
    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.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.identity)
      return;
    const request = await coreState.client.mutate({
      mutation: src(userAuthenticateMutationGQL),
      variables: {
        email: detail.email.value,
        password: detail.password.value,
      },
    });
    if (request.data.userAuthenticate) {
      this.toggleMenu();
      authStore.identity = request.data.userAuthenticate;
      runState.router.push("/");
    }
  }
  render() {
    return (h(Host, null, h("corejam-box", { position: "relative", flex: true, direction: "row", justify: "end" }, authStore.identity ? (h("corejam-box", { pr: 3 }, h("corejam-type", { "data-cy": "identity-email" }, authStore.identity.user.email))) : null, h("corejam-icons-account", { onClick: () => this.toggleMenu() }), 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.identity ? (h("corejam-box", { w: "12", flex: true, direction: "col" }, h("corejam-box", null, h("corejam-base-link", { href: "/account" }, "My Account")), h("corejam-box", { onClick: () => {
        this.logOut();
      } }, "Log out"))) : (h("corejam-form-container", { name: this.formId }, h("corejam-flash", { "data-flash": "isolated" }), h("corejam-box", { pb: 3, flex: true, direction: "col" }, h("corejam-box", { w: "12" }, h("corejam-form-input", { name: "email", type: "text", formId: this.formId, label: "Email" }), h("corejam-form-input", { name: "password", type: "password", formId: this.formId, label: "Password" })), h("corejam-box", { flex: true, direction: "row", w: "12", mt: 4 }, h("corejam-box", { w: "6", bg: "gray-200", rounded: "md", flex: true, justify: "center" }, h("corejam-form-submit", { formId: this.formId }, h("corejam-button", { type: "button", color: "gray-900", pl: "5", pr: "5", pt: "3", pb: "3" }, h("corejam-type", null, "Login")))), h("corejam-box", { w: "6", flex: true, justify: "center", items: "center" }, h("corejam-base-link", { href: "/register" }, "Register"))))))))));
  }
  get element() { return getElement(this); }
};

export { CorejamButton as corejam_button, IconsAccount as corejam_icons_account, CorejamIdentity as corejam_identity };
