import { r as registerInstance, h as h$1, c as Host } from './index-38ad4957.js';
import { b as browser, n as h, k as useState, f as useEffect } from './dom-context-hooks.module-50442785.js';
import { I as In, b as useCallback, i as isDemo } from './index.module-b23fdad8.js';
import { a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';

const debug = 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) {
    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 = "{}";
    h(this);
  }
  disconnectedCallback() { }
  render() {
    var _a;
    const [context, setContext] = In({
      namespace: VERIFICATION_PARENT_NAMESPACE,
      initialValue: false,
    });
    const props = JSON.parse(this.stateController);
    const demoIsAuth = isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
    const [container, setContainer] = useState(undefined);
    const [slot, setSlot] = useState(undefined);
    const updateTemplates = 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]);
    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 (h$1(Host, null, h$1("div", { ref: setSlot, style: { display: "contents" } }, h$1("slot", { name: "not-verified" }), h$1("slot", { name: "verified" })), h$1("div", { ref: setContainer }, h$1("slot", { name: "shown" }))));
  }
};

export { WidgetVerificationController as sqm_widget_verification_controller };
