'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 keys = require('./keys-cff24974.js');

const debug = domContextHooks_module.browser("sq:widget-verification");
function useTemplateChildren({ parent, callback }) {
  const parentObserver = new MutationObserver(listenForTemplateChanges);
  const childTemplateObserver = new MutationObserver(callback);
  parentObserver.observe(parent, {
    childList: true,
    // We only care about immediate children templates
    subtree: false,
  });
  listenForTemplateChanges({ addedNodes: parent.querySelectorAll("template") });
  function listenForTemplateChanges(mutationList) {
    var _a;
    // Be smart, only look at the mutation list
    (_a = mutationList.addedNodes) === null || _a === void 0 ? void 0 : _a.forEach((t) => {
      childTemplateObserver.observe(t.content, {
        childList: true,
        attributes: true,
        // Look deep into the templates for re-rendering
        subtree: true,
      });
    });
  }
  return () => {
    parentObserver.disconnect();
    childTemplateObserver.disconnect();
  };
}
const WidgetVerificationController = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * @undocumented
     * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false }, "disabled": "true" }
     * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true }, "disabled": "true" }
     */
    this.stateController = "{}";
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    var _a;
    const [context, setContext] = index_module.In({
      namespace: keys.VERIFICATION_PARENT_NAMESPACE,
      initialValue: false,
    });
    const props = JSON.parse(this.stateController);
    const demoIsAuth = index_module.isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
    const [container, setContainer] = domContextHooks_module.useState(undefined);
    const [slot, setSlot] = domContextHooks_module.useState(undefined);
    const updateTemplates = index_module.useCallback(() => {
      const isAuth = demoIsAuth || context;
      const templates = slot.querySelectorAll(`template`);
      const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
      if (template) {
        // use outerHTML if template's innerHTML is unset (only happens in Stencilbook)
        const newContent = template.innerHTML || template.firstElementChild.outerHTML;
        // if template contents are an exact match
        if (newContent === container.innerHTML) {
          debug("don't rerender");
        }
        else if (template) {
          container.innerHTML = newContent;
        }
      }
      const plopTargets = Array.from(slot.children).filter((el) => el.tagName === "RAISINS-PLOP-TARGET");
      // if editing in raisins
      if (plopTargets.length) {
        const loggedInPlopTargets = plopTargets.filter((el) => el.slot === "verified");
        const loggedOutPlopTargets = plopTargets.filter((el) => el.slot === "not-verified");
        loggedOutPlopTargets.forEach((target, i) => {
          if (isAuth) {
            target.style.display = "none";
            return;
          }
          // Place last plop target at the bottom of the parent
          if (i === loggedOutPlopTargets.length - 1) {
            target.style.bottom = "0px";
            target.style.left = "0px";
            target.style.right = "0px";
            target.style.position = "absolute";
          }
          target.style.height = "25px";
        });
        loggedInPlopTargets.forEach((target, i) => {
          if (!isAuth) {
            target.style.display = "none";
            return;
          }
          // Place last plop target at the bottom of the parent
          if (i === loggedInPlopTargets.length - 1) {
            target.style.bottom = "0px";
            target.style.left = "0px";
            target.style.right = "0px";
            target.style.position = "absolute";
          }
          target.style.height = "25px";
        });
      }
    }, [container, slot, context, demoIsAuth]);
    domContextHooks_module.useEffect(() => {
      if (!container || !slot) {
        debug("DOM not ready:");
        return;
      }
      // Run on first render
      updateTemplates();
      return useTemplateChildren({ parent: slot, callback: updateTemplates });
    }, [slot, container, context, demoIsAuth]);
    return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
  }
};

exports.sqm_widget_verification_controller = WidgetVerificationController;
