import { navigation, useCurrentPage } from "@saasquatch/component-boilerplate";
import { h } from "@stencil/core";
import { PortalFrameView } from "./sqm-portal-frame-view";
function setupGraphQL() {
  const id = "worried-camera@uexwltgh.mailosaur.net";
  const accountId = id;
  const programId = "a-referral-program";
  //@ts-ignore
  window.SquatchAndroid = true;
  //@ts-ignore
  window.widgetIdent = {
    tenantAlias: "test_as36zjtpfy7oo",
    appDomain: "https://staging.referralsaasquatch.com",
    token: 
    // you have to change this if you change the id or accountId
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQifX0.-WGV4_bzGCFp-OTIO-h-yp0MlgtkdufT_GgI4T691OY",
    userId: id,
    accountId,
    programId,
  };
  return { id, accountId };
}
function setupLoggedOut() {
  const programId = "a-referral-program";
  //@ts-ignore
  window.SquatchAndroid = true;
  //@ts-ignore
  window.widgetIdent = {
    tenantAlias: "test_as36zjtpfy7oo",
    appDomain: "https://staging.referralsaasquatch.com",
    programId,
  };
}
export default {
  title: "Components/Microsite Frame",
};
const defaultProps = {
  data: {
    footer: h("span", null, "example@example.com"),
    header: (h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
      h("span", { style: {
          fontSize: "var(--sl-font-size-large)",
          fontWeight: "bold",
        } }, "Microsite Header"),
      h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the microsite"))),
  },
  callbacks: {
    rerender: () => { },
  },
  ref: { current: undefined },
};
export const FrameWithMenu = () => {
  const props = {
    ...defaultProps,
  };
  return (h(PortalFrameView, Object.assign({}, props),
    h("sqm-navigation-menu", { "menu-label": "Menu" },
      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
      h("sl-menu-divider", null),
      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout"))));
};
export const FrameWithoutMenu = () => {
  const props = {
    ...defaultProps,
  };
  return h(PortalFrameView, Object.assign({}, props));
};
export const FullStackFrame = () => {
  var _a;
  setupGraphQL();
  return (h("div", null,
    h("sqm-portal-frame", null,
      h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
        h("span", { style: {
            fontSize: "var(--sl-font-size-large)",
            fontWeight: "bold",
          } }, "Portal Header"),
        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal")),
      h("a", { slot: "footer", class: "FooterEmail", href: "mailto:referrals@servicetitan.com" }, "referrals@servicetitan.com"),
      h("sqm-navigation-menu", { "menu-label": "Menu" },
        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
        h("sl-menu-divider", null),
        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout")),
      h("h1", null, "Something")),
    h("p", null,
      "Current path:",
      " ",
      h("code", null,
        h("strong", null, (_a = useCurrentPage()) === null || _a === void 0 ? void 0 : _a.pathname))),
    h("button", { onClick: navigation.back }, "Go Back")));
};
export const FullStackFrameLoggedOut = () => {
  var _a;
  setupLoggedOut();
  return (h("div", null,
    h("sqm-portal-frame", null,
      h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
        h("span", { style: {
            fontSize: "var(--sl-font-size-large)",
            fontWeight: "bold",
          } }, "Portal Header"),
        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal")),
      h("span", { slot: "footer" }, "sample@example.com"),
      h("sqm-navigation-menu", { "menu-label": "Menu" },
        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
        h("sl-menu-divider", null),
        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout")),
      h("h1", null, "Something")),
    h("p", null,
      "Current path:",
      " ",
      h("code", null,
        h("strong", null, (_a = useCurrentPage()) === null || _a === void 0 ? void 0 : _a.pathname))),
    h("button", { onClick: navigation.back }, "Go Back")));
};
