'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
const index_module = require('./index.module-f8c8495f.js');
const utils = require('./utils-6847bc06.js');

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

function usePopupContainer(props) {
  const engagementMedium = index_module.B();
  function closePopup() {
    var _a;
    if (index_module.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 = index_module.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) {
    index.registerInstance(this, hostRef);
    /**
     * Text at the bottom of the popup
     *
     * @uiName "Powered by" text
     */
    this.poweredByText = "Powered By";
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = utils.getProps(this);
    return index.h(PopupContainerView, Object.assign({}, usePopupContainer(thisProps)));
  }
};
PopupContainer.style = sqmPopupContainerCss;

exports.sqm_popup_container = PopupContainer;
