// packages/block-editor/src/components/editor-styles/index.js
import { colord, extend } from "colord";
import namesPlugin from "colord/plugins/names";
import a11yPlugin from "colord/plugins/a11y";
import { SVG } from "@wordpress/components";
import { useCallback, useMemo, memo } from "@wordpress/element";
import { useSelect } from "@wordpress/data";
import transformStyles from "../../utils/transform-styles";
import { store as blockEditorStore } from "../../store";
import { unlock } from "../../lock-unlock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
extend([namesPlugin, a11yPlugin]);
function useDarkThemeBodyClassName(styles, scope) {
  return useCallback(
    (node) => {
      if (!node) {
        return;
      }
      const { ownerDocument } = node;
      const { defaultView, body } = ownerDocument;
      const canvas = scope ? ownerDocument.querySelector(scope) : body;
      let backgroundColor;
      if (!canvas) {
        const tempCanvas = ownerDocument.createElement("div");
        tempCanvas.classList.add("editor-styles-wrapper");
        body.appendChild(tempCanvas);
        backgroundColor = defaultView?.getComputedStyle(tempCanvas, null).getPropertyValue("background-color");
        body.removeChild(tempCanvas);
      } else {
        backgroundColor = defaultView?.getComputedStyle(canvas, null).getPropertyValue("background-color");
      }
      const colordBackgroundColor = colord(backgroundColor);
      if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
        body.classList.remove("is-dark-theme");
      } else {
        body.classList.add("is-dark-theme");
      }
    },
    [styles, scope]
  );
}
function EditorStyles({ styles, scope, transformOptions }) {
  const overrides = useSelect(
    (select) => unlock(select(blockEditorStore)).getStyleOverrides(),
    []
  );
  const [transformedStyles, transformedSvgs] = useMemo(() => {
    const _styles = Object.values(styles ?? []);
    for (const [id, override] of overrides) {
      const index = _styles.findIndex(({ id: _id }) => id === _id);
      const overrideWithId = { ...override, id };
      if (index === -1) {
        _styles.push(overrideWithId);
      } else {
        _styles[index] = overrideWithId;
      }
    }
    return [
      transformStyles(
        _styles.filter((style) => style?.css),
        scope,
        transformOptions
      ),
      _styles.filter((style) => style.__unstableType === "svgs").map((style) => style.assets).join("")
    ];
  }, [styles, overrides, scope, transformOptions]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      "style",
      {
        ref: useDarkThemeBodyClassName(transformedStyles, scope)
      }
    ),
    transformedStyles.map((css, index) => /* @__PURE__ */ jsx("style", { children: css }, index)),
    /* @__PURE__ */ jsx(
      SVG,
      {
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 0 0",
        width: "0",
        height: "0",
        role: "none",
        style: {
          visibility: "hidden",
          position: "absolute",
          left: "-9999px",
          overflow: "hidden"
        },
        dangerouslySetInnerHTML: { __html: transformedSvgs }
      }
    )
  ] });
}
var editor_styles_default = memo(EditorStyles);
export {
  editor_styles_default as default
};
//# sourceMappingURL=index.js.map
