'use strict';

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

const index$1 = 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 index = require('./index-8c6255f5.js');

const debug = domContextHooks_module.browser("sq:useRouter");
function matchPath(pattern, page) {
  if (!pattern)
    return;
  const regexp = index.pathToRegexp(pattern);
  return regexp.exec(page);
}
function useContextRouter(props) {
  const host = index_module._();
  const [slot, setSlot] = domContextHooks_module.useState(undefined);
  const [container, setContainer] = domContextHooks_module.useState(undefined);
  const context = props.contextName;
  const page = domContextHooks_module.d(context);
  // convert sqm-routes into templates
  domContextHooks_module.useEffect(() => {
    const routes = host.querySelectorAll(`sqm-route`);
    const routesArray = Array.from(routes);
    routesArray.forEach((route) => {
      const newTemplate = document.createElement("template");
      newTemplate.setAttribute("path", route.path);
      newTemplate.innerHTML = route.innerHTML;
      route.parentNode.appendChild(newTemplate);
      route.parentNode.removeChild(route);
    });
  }, []);
  domContextHooks_module.useEffect(() => {
    var _a, _b;
    if (!container || !slot) {
      debug("DOM not ready for navigation rendering on:", page);
      return;
    }
    // <template>
    const templates = slot.querySelectorAll(`template`);
    const templatesArray = Array.from(templates);
    const template = templatesArray.find((template) => {
      var _a, _b, _c;
      //@ts-ignore
      const path = (_b = (_a = template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
      if ((_c = matchPath(path, page)) === null || _c === void 0 ? void 0 : _c.length)
        return template;
    });
    //@ts-ignore - can't access template attributes directly
    const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
    debug({
      containerDatasetPage: container.dataset.page,
      templatePath,
      page,
    });
    // if no routes found, and the old route doesn't match the new route
    if (!template) {
      // No matching page, display nothing
      debug("No matching page found for ", page, ", so render nothing");
      container.innerHTML = "";
      container.dataset.page = page;
      return;
    }
    debug("Page updated to ", page, template);
    // if pathToRegexp results truthy or page is an exact match
    if (!!matchPath(templatePath, container.dataset.page)) {
      debug("don't rerender");
      // Same page, do not re-render
      // Reduces dom mutations, speeds up page speed
    }
    else if (template) {
      container.innerHTML = template.innerHTML;
      container.dataset.page = page;
    }
  }, [slot, container, page]);
  return {
    callbacks: {
      setSlot,
      setContainer,
    },
  };
}

const sqmContextRouterCss = "sqm-router{display:contents}";

const SqmContextRouter = class {
  constructor(hostRef) {
    index$1.registerInstance(this, hostRef);
    this.ignored = true;
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const { callbacks } = useContextRouter(utils.getProps(this));
    return (index$1.h(index$1.Host, null, index$1.h("div", { ref: callbacks.setSlot, style: { display: "none" } }, index$1.h("slot", null)), index$1.h("div", { style: { display: "contents" }, ref: callbacks.setContainer })));
  }
};
SqmContextRouter.style = sqmContextRouterCss;

exports.sqm_context_router = SqmContextRouter;
