import { getElement } from "@stencil/core";
import { h } from "@stencil/core";
const map = new Map();
export function withShadowView(component) {
  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
  const element = getElement(component);
  let renderFn = component["render"].bind(component);
  const newRenderFn = () => {
    const key = element.getAttribute("stencilbook-shadow-view");
    if (key) {
      const value = map.get(key);
      if (value) {
        return value;
      }
    }
    return renderFn();
  };
  component["render"] = newRenderFn;
}
/**
 * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
 */
export const ShadowViewAddon = ({ story }, children) => {
  var _a;
  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
  if (!TagName)
    return children;
  const randomInt = Math.round(Math.random() * 100000);
  map.set(randomInt + "", children);
  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
  // This will only re-render when the tag name changes, so we use a random tag name every time.
  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
  return (h(RandomTagName, null,
    h(TagName, { "stencilbook-shadow-view": randomInt })));
};
