"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var ui_exports = {};
__export(ui_exports, {
  GlobalStylesMenuSlot: () => GlobalStylesMenuSlot,
  default: () => ui_default
});
module.exports = __toCommonJS(ui_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_components = require("@wordpress/components");
var import_blocks = require("@wordpress/blocks");
var import_data = require("@wordpress/data");
var import_block_editor = require("@wordpress/block-editor");
var import_i18n = require("@wordpress/i18n");
var import_preferences = require("@wordpress/preferences");
var import_icons = require("@wordpress/icons");
var import_core_data = require("@wordpress/core-data");
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_screen_root = __toESM(require("./screen-root"));
var import_screen_block_list = __toESM(require("./screen-block-list"));
var import_screen_block = __toESM(require("./screen-block"));
var import_screen_typography = __toESM(require("./screen-typography"));
var import_screen_typography_element = __toESM(require("./screen-typography-element"));
var import_font_size = __toESM(require("./font-sizes/font-size"));
var import_font_sizes = __toESM(require("./font-sizes/font-sizes"));
var import_screen_colors = __toESM(require("./screen-colors"));
var import_screen_color_palette = __toESM(require("./screen-color-palette"));
var import_screen_background = __toESM(require("./screen-background"));
var import_screen_shadows = require("./screen-shadows");
var import_screen_layout = __toESM(require("./screen-layout"));
var import_screen_style_variations = __toESM(require("./screen-style-variations"));
var import_style_book = __toESM(require("../style-book"));
var import_screen_css = __toESM(require("./screen-css"));
var import_screen_revisions = __toESM(require("./screen-revisions"));
var import_lock_unlock = require("../../lock-unlock");
var import_store = require("../../store");
var import_constants = require("../style-book/constants");
const SLOT_FILL_NAME = "GlobalStylesMenu";
const { useGlobalStylesReset } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = (0, import_components.createSlotFill)(SLOT_FILL_NAME);
function GlobalStylesActionMenu() {
  const [canReset, onReset] = useGlobalStylesReset();
  const { toggle } = (0, import_data.useDispatch)(import_preferences.store);
  const { canEditCSS } = (0, import_data.useSelect)((select) => {
    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
    return {
      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
    };
  }, []);
  const { setEditorCanvasContainerView } = (0, import_lock_unlock.unlock)(
    (0, import_data.useDispatch)(import_store.store)
  );
  const loadCustomCSS = () => {
    setEditorCanvasContainerView("global-styles-css");
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesMenuFill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.DropdownMenu,
    {
      icon: import_icons.moreVertical,
      label: (0, import_i18n.__)("More"),
      toggleProps: { size: "compact" },
      children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { children: [
          canEditCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { onClick: loadCustomCSS, children: (0, import_i18n.__)("Additional CSS") }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.MenuItem,
            {
              onClick: () => {
                toggle(
                  "core/edit-site",
                  "welcomeGuideStyles"
                );
                onClose();
              },
              children: (0, import_i18n.__)("Welcome Guide")
            }
          )
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.MenuItem,
          {
            onClick: () => {
              onReset();
              onClose();
            },
            disabled: !canReset,
            children: (0, import_i18n.__)("Reset styles")
          }
        ) })
      ] })
    }
  ) });
}
function GlobalStylesNavigationScreen({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.Navigator.Screen,
    {
      className: [
        "edit-site-global-styles-sidebar__navigator-screen",
        className
      ].filter(Boolean).join(" "),
      ...props
    }
  );
}
function BlockStylesNavigationScreens({
  parentMenu,
  blockStyles,
  blockName
}) {
  return blockStyles.map((style, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    GlobalStylesNavigationScreen,
    {
      path: parentMenu + "/variations/" + style.name,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block.default, { name: blockName, variation: style.name })
    },
    index
  ));
}
function ContextScreens({ name, parentMenu = "" }) {
  const blockStyleVariations = (0, import_data.useSelect)(
    (select) => {
      const { getBlockStyles } = select(import_blocks.store);
      return getBlockStyles(name);
    },
    [name]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      GlobalStylesNavigationScreen,
      {
        path: parentMenu + "/colors/palette",
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_color_palette.default, { name })
      }
    ),
    !!blockStyleVariations?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      BlockStylesNavigationScreens,
      {
        parentMenu,
        blockStyles: blockStyleVariations,
        blockName: name
      }
    )
  ] });
}
function GlobalStylesStyleBook() {
  const navigator = (0, import_components.useNavigator)();
  const { path } = navigator.location;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_style_book.default,
    {
      isSelected: (blockName) => (
        // Match '/blocks/core%2Fbutton' and
        // '/blocks/core%2Fbutton/typography', but not
        // '/blocks/core%2Fbuttons'.
        path === `/blocks/${encodeURIComponent(blockName)}` || path.startsWith(
          `/blocks/${encodeURIComponent(blockName)}/`
        )
      ),
      onSelect: (blockName) => {
        if (import_constants.STYLE_BOOK_COLOR_GROUPS.find(
          (group) => group.slug === blockName
        )) {
          navigator.goTo("/colors/palette");
          return;
        }
        if (blockName === "typography") {
          navigator.goTo("/typography");
          return;
        }
        navigator.goTo("/blocks/" + encodeURIComponent(blockName));
      }
    }
  );
}
function GlobalStylesBlockLink() {
  const navigator = (0, import_components.useNavigator)();
  const { selectedBlockName, selectedBlockClientId } = (0, import_data.useSelect)(
    (select) => {
      const { getSelectedBlockClientId, getBlockName } = select(import_block_editor.store);
      const clientId = getSelectedBlockClientId();
      return {
        selectedBlockName: getBlockName(clientId),
        selectedBlockClientId: clientId
      };
    },
    []
  );
  const blockHasGlobalStyles = (0, import_screen_block_list.useBlockHasGlobalStyles)(selectedBlockName);
  (0, import_element.useEffect)(() => {
    if (!selectedBlockClientId || !blockHasGlobalStyles) {
      return;
    }
    const currentPath = navigator.location.path;
    if (currentPath !== "/blocks" && !currentPath.startsWith("/blocks/")) {
      return;
    }
    const newPath = "/blocks/" + encodeURIComponent(selectedBlockName);
    if (newPath !== currentPath) {
      navigator.goTo(newPath, { skipFocus: true });
    }
  }, [selectedBlockClientId, selectedBlockName, blockHasGlobalStyles]);
}
function GlobalStylesEditorCanvasContainerLink() {
  const { goTo, location } = (0, import_components.useNavigator)();
  const editorCanvasContainerView = (0, import_data.useSelect)(
    (select) => (0, import_lock_unlock.unlock)(select(import_store.store)).getEditorCanvasContainerView(),
    []
  );
  const path = location?.path;
  const isRevisionsOpen = path === "/revisions";
  (0, import_element.useEffect)(() => {
    switch (editorCanvasContainerView) {
      case "global-styles-revisions":
      case "global-styles-revisions:style-book":
        if (!isRevisionsOpen) {
          goTo("/revisions");
        }
        break;
      case "global-styles-css":
        goTo("/css");
        break;
      // The stand-alone style book is open
      // and the revisions panel is open,
      // close the revisions panel.
      // Otherwise keep the style book open while
      // browsing global styles panel.
      //
      // Falling through as it matches the default scenario.
      case "style-book":
      default:
        if (isRevisionsOpen) {
          goTo("/", { isBack: true });
        }
        break;
    }
  }, [editorCanvasContainerView, isRevisionsOpen, goTo]);
}
function useNavigatorSync(parentPath, onPathChange) {
  const navigator = (0, import_components.useNavigator)();
  const { path: childPath } = navigator.location;
  const previousParentPath = (0, import_compose.usePrevious)(parentPath);
  const previousChildPath = (0, import_compose.usePrevious)(childPath);
  (0, import_element.useEffect)(() => {
    if (parentPath !== childPath) {
      if (parentPath !== previousParentPath) {
        navigator.goTo(parentPath);
      } else if (childPath !== previousChildPath) {
        onPathChange(childPath);
      }
    }
  }, [
    onPathChange,
    parentPath,
    previousChildPath,
    previousParentPath,
    childPath,
    navigator
  ]);
}
function NavigationSync({ path: parentPath, onPathChange, children }) {
  useNavigatorSync(parentPath, onPathChange);
  return children;
}
function GlobalStylesUI({ path, onPathChange }) {
  const blocks = (0, import_blocks.getBlockTypes)();
  const editorCanvasContainerView = (0, import_data.useSelect)(
    (select) => (0, import_lock_unlock.unlock)(select(import_store.store)).getEditorCanvasContainerView(),
    []
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.Navigator,
    {
      className: "edit-site-global-styles-sidebar__navigator-provider",
      initialPath: "/",
      children: [
        path && onPathChange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationSync, { path, onPathChange }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_root.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_style_variations.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/blocks", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block_list.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/font-sizes", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_sizes.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/font-sizes/:origin/:slug", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_size.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "text" }) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "link" }) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/heading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "heading" }) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/caption", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "caption" }) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "button" }) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_colors.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/shadows", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_shadows.ScreenShadows, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/shadows/edit/:category/:slug", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_shadows.ScreenShadowsEdit, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/layout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_layout.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/css", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_css.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/revisions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_revisions.default, {}) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/background", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_background.default, {}) }),
        blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          GlobalStylesNavigationScreen,
          {
            path: "/blocks/" + encodeURIComponent(block.name),
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block.default, { name: block.name })
          },
          "menu-block-" + block.name
        )),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextScreens, {}),
        blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          ContextScreens,
          {
            name: block.name,
            parentMenu: "/blocks/" + encodeURIComponent(block.name)
          },
          "screens-block-" + block.name
        )),
        "style-book" === editorCanvasContainerView && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesStyleBook, {}),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesActionMenu, {}),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesBlockLink, {}),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesEditorCanvasContainerLink, {})
      ]
    }
  );
}
var ui_default = GlobalStylesUI;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  GlobalStylesMenuSlot
});
//# sourceMappingURL=ui.js.map
