import { h, c as Host, r as registerInstance } from './index-38ad4957.js';
import { n as h$1 } from './dom-context-hooks.module-50442785.js';
import { B } from './index.module-b23fdad8.js';
import { g as getProps } from './utils-334c1e34.js';

const PopupContainerView = (props) => {
  const { states, callbacks } = props;
  const { styles } = states;
  return (h(Host, { class: "squatch-container" },
    h("div", { style: { padding: props.states.styles.padding }, part: "sqm-base" },
      styles.closeButton && (h("span", { part: "sqm-close-button", class: "close squatch-header-close", "data-close-panel": "#squatch-panel", onClick: () => callbacks.closePopup() }, styles.closeButtonText)),
      h("slot", null),
      styles.poweredBy ? (h("a", { class: "sqh-attribution", href: "https://impact.com/advocate/", target: "_blank" }, styles.poweredByText)) : (""))));
};

function usePopupContainer(props) {
  const engagementMedium = B();
  function closePopup() {
    var _a;
    if (B() === "POPUP") {
      (_a = window.frameElement["squatchJsApi"]) === null || _a === void 0 ? void 0 : _a.close();
    }
  }
  const popupPadding = props.popupPadding
    ? props.popupPadding === "none"
      ? "0"
      : `var(--sl-spacing-${props.popupPadding})`
    : "var(--sl-spacing-medium)";
  const embedPadding = props.embedPadding
    ? props.embedPadding === "none"
      ? "0"
      : `var(--sl-spacing-${props.embedPadding})`
    : "0";
  const padding = B() === "POPUP" ? popupPadding : embedPadding;
  return {
    states: {
      showCloseButton: props.closeButton && engagementMedium === "POPUP",
      styles: {
        ...props,
        padding,
        closeButtonText: props.closeButtonText ? props.closeButtonText : "X",
        poweredByText: props.poweredByText,
      },
    },
    data: {},
    callbacks: { closePopup },
  };
}

const sqmPopupContainerCss = ".squatch-header-close{position:absolute;right:20px;top:10px;cursor:pointer}.squatch-container{background-color:var(--widget-background-color);display:block}";

const PopupContainer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * Text at the bottom of the popup
     *
     * @uiName "Powered by" text
     */
    this.poweredByText = "Powered By";
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    return h(PopupContainerView, Object.assign({}, usePopupContainer(thisProps)));
  }
};
PopupContainer.style = sqmPopupContainerCss;

export { PopupContainer as sqm_popup_container };
