import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { PageMeta } from "../page/head-tags";
import { useIsInBuilder } from "../../hooks/use-is-in-builder";
import { PreviewToolbar } from "./preview-toolbar";
function PreviewSwitcher({ isPreview }) {
  const shadowContainerRef = useRef(null);
  const [shadowRoot, setShadowRoot] = useState(null);
  const isInBuilder = useIsInBuilder();
  const showToolbar = !isInBuilder && isPreview;
  useEffect(() => {
    if (!showToolbar)
      return;
    if (shadowContainerRef.current && shadowContainerRef.current.shadowRoot == null && shadowRoot == null) {
      const root = shadowContainerRef.current.attachShadow({ mode: "open" });
      setShadowRoot(root);
    }
  }, [showToolbar, shadowRoot, setShadowRoot]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    showToolbar && /* @__PURE__ */ jsx("span", { id: "makeswift-preview-switcher", ref: shadowContainerRef, children: shadowRoot ? createPortal(/* @__PURE__ */ jsx(PreviewToolbar, {}), shadowRoot) : null }),
    /* @__PURE__ */ jsx(
      PageMeta,
      {
        name: "makeswift-preview-info",
        content: JSON.stringify({ isPreview, inBuilder: isInBuilder })
      }
    )
  ] });
}
export {
  PreviewSwitcher
};
//# sourceMappingURL=preview-switcher.js.map