import React, { useCallback, useEffect, useRef, useState } from "react";
import { useTheme } from "./../ricos-styles/theme-provider.js";
import { toRgbTuple } from "./../ricos-styles/themeStrategy/theme-utils.js";
import { useWixInstanceService } from "./../_shared/request-service-provider/wix-instance-context.js";
import { uuid } from "./../wix-rich-content-common/index.js";
import { Iframe } from "./iframe.js";
const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
const buildWidgetParams = (colorPalette, fonts) => {
  const params = new URLSearchParams();
  params.set("injectClientSdk", "true");
  if (colorPalette?.length) {
    const [bg, , accent, accentFg, , fg] = colorPalette.map(
      (c) => toRgbTuple(c)?.replace(/,\s*/g, " ")
    );
    if (bg) {
      params.set("bg", bg);
      params.set("fg", fg ?? "");
      params.set("accent", accent ?? "");
      params.set("accentFg", accentFg ?? "");
    }
  }
  if (fonts?.heading) {
    params.set("fontHeading", fonts.heading);
  }
  if (fonts?.body) {
    params.set("fontBody", fonts.body);
  }
  const str = params.toString();
  return str ? `?${str}` : "";
};
const IframeWidget = ({
  widgetId,
  isViewer,
  onHeightChange,
  colorPalette
}) => {
  const theme = useTheme();
  const headingFont = theme.customStyles?.h1?.fontFamily?.split(",")[0].trim();
  const bodyFont = theme.customStyles?.p?.fontFamily?.split(",")[0].trim();
  const fonts = headingFont || bodyFont ? { heading: headingFont ?? "", body: bodyFont ?? "" } : void 0;
  const metaSiteId = useWixInstanceService()().metaSiteId;
  const [currId] = useState(() => uuid());
  const isLoadedRef = useRef(false);
  const handleIframeLoad = useCallback(() => {
    if (isLoadedRef.current) {
      return;
    }
    isLoadedRef.current = true;
    window.ricosHtmlPlugins ||= /* @__PURE__ */ new Set();
    window.ricosHtmlPlugins.add(currId);
  }, [currId]);
  useEffect(() => {
    const timeout = setTimeout(handleIframeLoad, 5e3);
    return () => clearTimeout(timeout);
  }, [handleIframeLoad]);
  useEffect(() => {
    if (!onHeightChange) {
      return;
    }
    const handleMessage = (event) => {
      const { type, widgetId: messageWidgetId, height } = event.data || {};
      if (type === "widgetViewer:heightResize" && messageWidgetId === widgetId) {
        onHeightChange(height);
      }
    };
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [widgetId, onHeightChange]);
  const isValidWidgetId = UUID_REGEX.test(widgetId);
  const isValidMetaSiteId = !!metaSiteId && UUID_REGEX.test(metaSiteId);
  if (!isValidWidgetId) {
    console.error("IframeWidget: invalid widgetId", widgetId);
  }
  if (metaSiteId && !isValidMetaSiteId) {
    console.error("IframeWidget: invalid metaSiteId", metaSiteId);
  }
  if (!isValidWidgetId || !isValidMetaSiteId) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(
    Iframe,
    {
      onLoad: handleIframeLoad,
      src: `https://widgets.wixapps.net/${metaSiteId}/${widgetId}${buildWidgetParams(colorPalette, fonts)}`,
      isViewer,
      sandbox: "allow-popups allow-presentation allow-forms allow-same-origin allow-scripts"
    }
  );
};
export {
  IframeWidget
};
//# sourceMappingURL=iframe-widget.js.map
