import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export 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)));
}
