import classNames from "classnames";
import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
import { SPOILER_TYPE } from "./../../ricos-content/index.js";
import { buildThemeCssVars } from "./../../ricos-styles/index.js";
import {
  AccessibilityListener,
  GlobalContext,
  getLangDir
} from "./../../wix-rich-content-common/index.js";
import viewerStyles from "../statics/rich-content-viewer-scss.js";
import rtlStyles from "../statics/rtl-scss.js";
import { AddAnchors } from "./components/add-anchors.js";
import { ContentTraverser } from "./content-traverser.js";
const styles = { ...viewerStyles, ...rtlStyles };
const ContentViewer = (props) => {
  const {
    config = {},
    onHover,
    isMobile = false,
    addAnchors,
    onMouseOver = () => {
    },
    content,
    setRef,
    typeMappers,
    nodeViewRenderers,
    nodeViewDecorators,
    experiments = {},
    t
  } = props;
  const [minHeight, setMinHeight] = useState(void 0);
  const viewerRef = useRef(null);
  const contentRef = useRef(null);
  useLayoutEffect(() => {
    const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
    if (!isSafari || !contentRef.current) {
      return;
    }
    const resizeObserver = new ResizeObserver((entries) => {
      const newHeight = entries[0].contentRect.height;
      if (newHeight > 0) {
        setMinHeight(newHeight);
      }
    });
    resizeObserver.observe(contentRef.current);
    return () => {
      resizeObserver.disconnect();
    };
  }, [content]);
  const handleRef = useCallback(
    (node) => {
      viewerRef.current = node;
      if (setRef) {
        setRef.current = node;
      }
    },
    [setRef]
  );
  const SpoilerViewerWrapper = config[SPOILER_TYPE]?.SpoilerViewerWrapper;
  const contextualData = getContextualData(props);
  const viewerClassName = classNames(styles.viewer, {
    [rtlStyles.rtl]: contextualData.textDirection === "rtl"
  });
  const style = buildThemeCssVars(contextualData.theme, content?.documentStyle ?? {});
  const dataId = { "data-id": "content-viewer" };
  return /* @__PURE__ */ React.createElement(GlobalContext.Provider, { key: "RicosViewer", value: { experiments, isMobile, t } }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames(styles.wrapper),
      dir: contextualData.languageDir,
      style: {
        ...style,
        minHeight: minHeight ? `${minHeight}px` : void 0
      },
      onMouseEnter: (e) => onHover && onHover(e),
      onMouseOver,
      ref: handleRef,
      ...dataId
    },
    props.devTools,
    /* @__PURE__ */ React.createElement("div", { className: viewerClassName, ref: contentRef }, /* @__PURE__ */ React.createElement(AddAnchors, { addAnchors }, /* @__PURE__ */ React.createElement(
      ContentTraverser,
      {
        content,
        typeMappers,
        context: contextualData,
        nodeViewRenderers,
        nodeViewDecorators,
        SpoilerViewerWrapper
      }
    ))),
    /* @__PURE__ */ React.createElement(AccessibilityListener, { isMobile })
  ));
};
const getContextualData = ({
  t,
  theme,
  plugins,
  isMobile = false,
  anchorTarget,
  relValue,
  customAnchorScroll,
  config,
  locale,
  disabled,
  seoMode,
  iframeSandboxDomain,
  textAlignment,
  experiments,
  textDirection,
  direction,
  helpers,
  onNodeClick,
  jsdomMode,
  baseUrl,
  isPrint
}) => {
  return {
    t,
    theme: theme || {},
    isMobile,
    anchorTarget,
    relValue,
    customAnchorScroll,
    config,
    helpers: helpers || {},
    locale: locale || "en",
    disabled,
    seoMode: seoMode ?? (isPrint ? {} : void 0),
    iframeSandboxDomain,
    disableRightClick: config?.uiSettings?.disableRightClick,
    textAlignment,
    experiments,
    textDirection,
    languageDir: direction || getLangDir(locale),
    onNodeClick,
    jsdomMode,
    baseUrl,
    isPrint,
    plugins
  };
};
export {
  ContentViewer
};
//# sourceMappingURL=content-viewer.js.map
