// packages/editor/src/components/global-styles/index.js
import { store as coreStore } from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";
import { useMemo } from "@wordpress/element";
import { GlobalStylesUI } from "@wordpress/global-styles-ui";
import { uploadMedia } from "@wordpress/media-utils";
import { store as editorStore } from "../../store/index.js";
import { GlobalStylesBlockLink } from "./block-link.js";
import { useGlobalStyles } from "./hooks.js";
import { useGlobalStyles as useGlobalStyles2, useStyle, useSetting } from "./hooks.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function useServerData() {
  const {
    styles,
    __unstableResolvedAssets,
    colors,
    gradients,
    __experimentalDiscussionSettings,
    mediaUploadHandler,
    fontLibraryEnabled
  } = useSelect((select) => {
    const { getEditorSettings } = select(editorStore);
    const { canUser } = select(coreStore);
    const editorSettings = getEditorSettings();
    const canUserUploadMedia = canUser("create", {
      kind: "postType",
      name: "attachment"
    });
    return {
      styles: editorSettings?.styles,
      __unstableResolvedAssets: editorSettings?.__unstableResolvedAssets,
      colors: editorSettings?.colors,
      gradients: editorSettings?.gradients,
      __experimentalDiscussionSettings: editorSettings?.__experimentalDiscussionSettings,
      mediaUploadHandler: canUserUploadMedia ? uploadMedia : void 0,
      fontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true
    };
  }, []);
  const serverCSS = useMemo(() => {
    if (!styles) {
      return [];
    }
    return styles.filter((style) => !style.isGlobalStyles);
  }, [styles]);
  const serverSettings = useMemo(() => {
    return {
      __unstableResolvedAssets,
      settings: {
        color: {
          palette: {
            theme: colors ?? []
          },
          gradients: {
            theme: gradients ?? []
          },
          duotone: {
            theme: []
          }
        }
      },
      __experimentalDiscussionSettings,
      mediaUpload: mediaUploadHandler
    };
  }, [
    __unstableResolvedAssets,
    colors,
    gradients,
    __experimentalDiscussionSettings,
    mediaUploadHandler
  ]);
  return { serverCSS, serverSettings, fontLibraryEnabled };
}
function GlobalStylesUIWrapper({ path, onPathChange }) {
  const {
    user: userConfig,
    base: baseConfig,
    setUser: setUserConfig,
    isReady
  } = useGlobalStyles();
  const { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();
  if (!isReady) {
    return null;
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      GlobalStylesUI,
      {
        value: userConfig,
        baseValue: baseConfig || {},
        onChange: setUserConfig,
        path,
        onPathChange,
        fontLibraryEnabled,
        serverCSS,
        serverSettings
      }
    ),
    /* @__PURE__ */ jsx(
      GlobalStylesBlockLink,
      {
        path,
        onPathChange
      }
    )
  ] });
}
export {
  GlobalStylesUIWrapper as default,
  useGlobalStyles2 as useGlobalStyles,
  useSetting,
  useStyle
};
//# sourceMappingURL=index.js.map
