import { Fragment, jsx } from "react/jsx-runtime";
import { __ } from "@wordpress/i18n";
import { useDispatch } from "@wordpress/data";
import { useCallback } from "@wordpress/element";
import { store as preferencesStore } from "@wordpress/preferences";
import { privateApis as routerPrivateApis } from "@wordpress/router";
import { addQueryArgs } from "@wordpress/url";
import SidebarNavigationScreen from "../sidebar-navigation-screen";
import { unlock } from "../../lock-unlock";
import { store as editSiteStore } from "../../store";
import SidebarNavigationItem from "../sidebar-navigation-item";
import useGlobalStylesRevisions from "../global-styles/screen-revisions/use-global-styles-revisions";
import SidebarNavigationScreenDetailsFooter from "../sidebar-navigation-screen-details-footer";
import { MainSidebarNavigationContent } from "../sidebar-navigation-screen-main";
const { useLocation, useHistory } = unlock(routerPrivateApis);
function SidebarNavigationItemGlobalStyles(props) {
  const { name } = useLocation();
  return /* @__PURE__ */ jsx(
    SidebarNavigationItem,
    {
      ...props,
      "aria-current": name === "styles"
    }
  );
}
function SidebarNavigationScreenGlobalStyles() {
  const history = useHistory();
  const { path } = useLocation();
  const {
    revisions,
    isLoading: isLoadingRevisions,
    revisionsCount
  } = useGlobalStylesRevisions();
  const { openGeneralSidebar } = useDispatch(editSiteStore);
  const { setEditorCanvasContainerView } = unlock(
    useDispatch(editSiteStore)
  );
  const { set: setPreference } = useDispatch(preferencesStore);
  const openGlobalStyles = useCallback(async () => {
    history.navigate(addQueryArgs(path, { canvas: "edit" }), {
      transition: "canvas-mode-edit-transition"
    });
    return Promise.all([
      setPreference("core", "distractionFree", false),
      openGeneralSidebar("edit-site/global-styles")
    ]);
  }, [path, history, openGeneralSidebar, setPreference]);
  const openRevisions = useCallback(async () => {
    await openGlobalStyles();
    setEditorCanvasContainerView("global-styles-revisions");
  }, [openGlobalStyles, setEditorCanvasContainerView]);
  const shouldShowGlobalStylesFooter = !!revisionsCount && !isLoadingRevisions;
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
    SidebarNavigationScreen,
    {
      title: __("Design"),
      isRoot: true,
      description: __(
        "Customize the appearance of your website using the block editor."
      ),
      content: /* @__PURE__ */ jsx(MainSidebarNavigationContent, { activeItem: "styles-navigation-item" }),
      footer: shouldShowGlobalStylesFooter && /* @__PURE__ */ jsx(
        SidebarNavigationScreenDetailsFooter,
        {
          record: revisions?.[0],
          revisionsCount,
          onClick: openRevisions
        }
      )
    }
  ) });
}
export {
  SidebarNavigationItemGlobalStyles,
  SidebarNavigationScreenGlobalStyles as default
};
//# sourceMappingURL=index.js.map
