import { h, F as Fragment, r as registerInstance } from './index-38ad4957.js';
import { i as intl } from './global-96c14d63.js';
import { n as h$1, k as useState } from './dom-context-hooks.module-50442785.js';
import { F as Fn, i as isDemo, d as dist, H, J, B, w as wn, $ as $e } from './index.module-b23fdad8.js';
import { c as cjs } from './cjs-bdfb4486.js';
import { g as getProps } from './utils-334c1e34.js';
import { c as createStyleSheet } from './JSS-67b5cff8.js';
import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, u as useReferralCodes } from './useReferralCodes-52ca720f.js';
import './mixins-f750863a.js';
import { C as CopyTextView } from './copy-text-view-87259b11.js';

const style = {
  Container: {
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "center",
    gap: "var(--sl-spacing-small)",
    width: "100%",
  },
  TextContainer: {
    display: "flex",
    gap: "var(--sl-spacing-xx-small)",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
function PaginationView(props) {
  const { states, callbacks, text, buttonType } = props;
  const { onNext, onPrev } = callbacks;
  const { currentPage, totalPages, loading } = states;
  if (totalPages === 1)
    return h(Fragment, null);
  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    !loading && (h(Fragment, null,
      h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
    h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
      h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
}

function usePagination(props) {
  var _a;
  const context = Fn(REFERRAL_CODES_PAGINATION_CONTEXT);
  const currentPage = context.states.currentPage + 1;
  const totalPages = (_a = context.states) === null || _a === void 0 ? void 0 : _a.pageCount;
  return {
    states: {
      currentPage,
      totalPages,
      loading: context.states.loading,
    },
    callbacks: {
      onNext: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
      onPrev: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
    },
    text: {
      paginationText: intl.formatMessage({
        id: `paginationText`,
        defaultMessage: props.paginationText,
      }, {
        currentPage,
        totalPages,
      }),
    },
  };
}

const Pagination = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ignored = true;
    /**
     * @uiName Pagination text
     */
    this.paginationText = "{currentPage} of {totalPages}";
    /**
     * The type of the button that is used (primary or secondary).
     * @uiName Button Type
     * @uiType string
     * @uiEnum ["primary", "secondary"]
     * @uiEnumNames ["Primary", "Secondary"]
     * @uiGroup Style
     */
    this.buttonType = "secondary";
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const hookProps = isDemo()
      ? useDemoPagination(getProps(this))
      : usePagination(getProps(this));
    return h(PaginationView, Object.assign({}, hookProps));
  }
};
function useDemoPagination(props) {
  const [currentPage, setCurrentPage] = useState(1);
  return cjs({
    states: {
      currentPage,
      totalPages: 5,
      loading: false,
    },
    buttonType: props.buttonType,
    callbacks: {
      onNext: () => setCurrentPage(currentPage + 1),
      onPrev: () => setCurrentPage(currentPage - 1),
    },
    text: {
      paginationText: intl.formatMessage({
        id: `paginationText`,
        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
      }, {
        currentPage: currentPage,
        totalPages: 5,
      }),
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}

const MessageLinkQuery = dist.gql `
  query getReferralCode($programId: ID) {
    user: viewer {
      ... on User {
        referralCode(programId: $programId)
      }
    }
  }
`;
const WIDGET_ENGAGEMENT_EVENT = dist.gql `
  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
    createUserAnalyticsEvent(eventMeta: $eventMeta)
  }
`;
function useReferralCode(props) {
  var _a, _b;
  const { programId = H() } = props;
  const user = J();
  const engagementMedium = B();
  const contextData = Fn(REFERRAL_CODES_NAMESPACE);
  const { data } = wn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
  const [setCopied] = $e(SET_CODE_COPIED);
  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode))) !== null && _b !== void 0 ? _b : 
  // Shown during loading
  "...";
  const [open, setOpen] = useState(false);
  async function onClick() {
    if (contextData) {
      await setCopied({ referralCode: contextData.referralCode });
      contextData.refresh();
    }
    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
    // Only if called from a user-initiated event
    navigator.clipboard.writeText(copyString);
    setOpen(true);
    setTimeout(() => setOpen(false), props.tooltiplifespan);
    sendLoadEvent({
      eventMeta: {
        programId,
        id: user === null || user === void 0 ? void 0 : user.id,
        accountId: user === null || user === void 0 ? void 0 : user.accountId,
        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
        meta: {
          engagementMedium,
          shareMedium: "DIRECT",
        },
      },
    });
  }
  return {
    ...props,
    onClick,
    open,
    copyString: copyString,
    isCopied: contextData === null || contextData === void 0 ? void 0 : contextData.isCopied,
    showNotificationText: props.showNotificationText && !!(contextData === null || contextData === void 0 ? void 0 : contextData.singleUse),
  };
}

const ReferralCode = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * Shown inside a tooltip after someone has successfully copied the link to their clipboard
     *
     * @uiName Tooltip text
     */
    this.tooltiptext = "Copied to Clipboard";
    /**
     * Boolean used to show notification text below input
     *
     * @uiName Show notification text
     */
    this.showNotificationText = false;
    /**
     * Shown underneath single-use promo codes when the user has already copied the code
     *
     * @uiName Notification text
     */
    this.notificationText = "You've copied this code before";
    /**
     * The number of milliseconds that the tooltip appears for
     *
     * @uiName Tooltip lifespan
     */
    this.tooltiplifespan = 1000;
    /**
     * Change the text alignment
     *
     * @uiName Referral code alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     * @uiGroup Style
     */
    this.textAlign = "left";
    /**
     * @uiName Copy button label
     */
    this.copyButtonLabel = "Copy Code";
    /**
     * Set the copy button style and placement
     *
     * @uiName Style
     * @uiType string
     * @uiEnum ["icon", "button-outside", "button-below"]
     * @uiEnumNames ["Icon", "Button outside", "Button below"]
     * @uiGroup Style
     */
    this.buttonStyle = "icon";
    /**
     * The type of the button that is used (primary or secondary).
     * @uiName Button Type
     * @uiType string
     * @uiEnum ["primary", "secondary"]
     * @uiEnumNames ["Primary", "Secondary"]
     * @uiGroup Style
     */
    this.buttonType = "primary";
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    const props = isDemo()
      ? useDemoReferralCode(thisProps)
      : useReferralCode(thisProps);
    return h(CopyTextView, Object.assign({}, props));
  }
};
function useDemoReferralCode(props) {
  const [open, setOpen] = useState(false);
  const copyString = "REFERRALCODE001";
  return cjs({
    copyString: copyString,
    tooltiptext: props.tooltiptext,
    textAlign: props.textAlign,
    copyButtonLabel: props.copyButtonLabel,
    buttonStyle: props.buttonStyle,
    notificationText: props.notificationText,
    showNotificationText: props.showNotificationText,
    isCopied: props.showNotificationText,
    borderColor: props.borderColor,
    backgroundColor: props.backgroundColor,
    textColor: props.textColor,
    borderRadius: props.borderRadius,
    buttonType: props.buttonType,
    isUsed: false,
    rewardStatus: "AVAILABLE",
    open,
    onClick: () => {
      // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
      // Only if called from a user-initiated event
      navigator.clipboard.writeText(copyString);
      setOpen(true);
      setTimeout(() => setOpen(false), props.tooltiplifespan);
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}

function ReferralCodesView(props) {
  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
  const style = {
    Wrapper: {
      width: "100%",
      display: "flex",
      alignItems: "flex-start",
      justifyContent: "center",
      flexDirection: "column",
      gap: "var(--sl-spacing-large)",
      color: textColor,
    },
    HeaderContainer: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      width: "100%",
    },
    ShareCodeContainer: {
      width: "100%",
      display: "flex",
      alignItems: "flex-start",
      justifyContent: "center",
      flexDirection: "column",
    },
    ShareButtonContainer: {
      width: "100%",
      display: "flex",
      alignItems: "flex-start",
      justifyContent: "center",
      flexDirection: "column",
    },
    TitleText: {
      fontSize: "var(--sl-font-size-large)",
      margin: "0",
    },
  };
  const vanillaStyle = `
    :host {
      display: block;
    }
    :host([hidden]): {
      display: none;
    }
  `;
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const getSlotContent = (states) => {
    if (states.noCodes) {
      return slots.empty;
    }
    if (states.loading) {
      return slots.loading;
    }
    return (h("div", { class: sheet.classes.Wrapper },
      h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
      h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
  };
  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h("div", { class: sheet.classes.HeaderContainer },
      h("h2", { class: sheet.classes.TitleText }, titleText),
      !states.noCodes && !states.loading && slots.pagination),
    getSlotContent(states)));
}

const ReferralCodes = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * @uiName Title Text
     */
    this.titleText = "Start sharing";
    /**
     * @uiName Empty State Header Text
     */
    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
    /**
     * @uiName Empty State Description Text
     */
    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
    /**
     * @uiName Empty State Image URL
     */
    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    const props = isDemo()
      ? useDemoReferralCodes(thisProps)
      : useReferralCodes(thisProps);
    const slots = {
      shareButtons: h("slot", { name: "shareButtons" }),
      shareCodes: h("slot", { name: "shareCodes" }),
      pagination: h("slot", { name: "pagination" }),
      empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
      loading: h(LoadingSlot, null),
    };
    const viewProps = {
      slots,
      ...props,
      loading: props.states.loading,
      noCodes: props.states.noCodes,
    };
    return h(ReferralCodesView, Object.assign({}, viewProps));
  }
};
function EmptySlot({ headerText, descriptionText, imageUrl, }) {
  return (h("slot", { name: "empty" }, h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
}
function LoadingSlot() {
  return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
}
function LoadingRow() {
  return h("sqm-skeleton", null);
}
function useDemoReferralCodes(props) {
  return cjs({
    titleText: props.titleText,
    textColor: props.textColor,
    states: {
      noCodes: false,
      loading: false,
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}

export { Pagination as sqm_pagination, ReferralCode as sqm_referral_code, ReferralCodes as sqm_referral_codes };
