// packages/editor/src/components/header/index.js
import { store as blockEditorStore } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { useMediaQuery, useViewportMatch } from "@wordpress/compose";
import { __unstableMotion as motion } from "@wordpress/components";
import { store as preferencesStore } from "@wordpress/preferences";
import { useState } from "@wordpress/element";
import { PinnedItems } from "@wordpress/interface";
import BackButton, { useHasBackButton } from "./back-button.js";
import CollapsibleBlockToolbar from "../collapsible-block-toolbar/index.js";
import DocumentBar from "../document-bar/index.js";
import DocumentTools from "../document-tools/index.js";
import MoreMenu from "../more-menu/index.js";
import PostPreviewButton from "../post-preview-button/index.js";
import PostPublishButtonOrToggle from "../post-publish-button/post-publish-button-or-toggle.js";
import PostSavedState from "../post-saved-state/index.js";
import PostViewLink from "../post-view-link/index.js";
import PreviewDropdown from "../preview-dropdown/index.js";
import ZoomOutToggle from "../zoom-out-toggle/index.js";
import { store as editorStore } from "../../store/index.js";
import {
  TEMPLATE_PART_POST_TYPE,
  PATTERN_POST_TYPE,
  NAVIGATION_POST_TYPE
} from "../../store/constants.js";
import { unlock } from "../../lock-unlock.js";
import { jsx, jsxs } from "react/jsx-runtime";
var toolbarVariations = {
  distractionFreeDisabled: { y: "-50px" },
  distractionFreeHover: { y: 0 },
  distractionFreeHidden: { y: "-50px" },
  visible: { y: 0 },
  hidden: { y: 0 }
};
var backButtonVariations = {
  distractionFreeDisabled: { x: "-100%" },
  distractionFreeHover: { x: 0 },
  distractionFreeHidden: { x: "-100%" },
  visible: { x: 0 },
  hidden: { x: 0 }
};
function Header({
  customSaveButton,
  forceIsDirty,
  setEntitiesSavedStatesCallback
}) {
  const isWideViewport = useViewportMatch("large");
  const isLargeViewport = useViewportMatch("medium");
  const isTooNarrowForDocumentBar = useMediaQuery("(max-width: 403px)");
  const {
    postType,
    isTextEditor,
    isPublishSidebarOpened,
    showIconLabels,
    hasFixedToolbar,
    hasBlockSelection,
    hasSectionRootClientId,
    isStylesCanvasActive
  } = useSelect((select) => {
    const { get: getPreference } = select(preferencesStore);
    const {
      getEditorMode,
      getCurrentPostType,
      isPublishSidebarOpened: _isPublishSidebarOpened
    } = select(editorStore);
    const { getStylesPath, getShowStylebook } = unlock(
      select(editorStore)
    );
    const { getBlockSelectionStart, getSectionRootClientId } = unlock(
      select(blockEditorStore)
    );
    return {
      postType: getCurrentPostType(),
      isTextEditor: getEditorMode() === "text",
      isPublishSidebarOpened: _isPublishSidebarOpened(),
      showIconLabels: getPreference("core", "showIconLabels"),
      hasFixedToolbar: getPreference("core", "fixedToolbar"),
      hasBlockSelection: !!getBlockSelectionStart(),
      hasSectionRootClientId: !!getSectionRootClientId(),
      isStylesCanvasActive: !!getStylesPath()?.startsWith("/revisions") || getShowStylebook()
    };
  }, []);
  const canBeZoomedOut = ["post", "page", "wp_template"].includes(postType) && hasSectionRootClientId;
  const disablePreviewOption = [
    NAVIGATION_POST_TYPE,
    TEMPLATE_PART_POST_TYPE,
    PATTERN_POST_TYPE
  ].includes(postType) || isStylesCanvasActive;
  const [isBlockToolsCollapsed, setIsBlockToolsCollapsed] = useState(true);
  const hasCenter = !isTooNarrowForDocumentBar && (!hasFixedToolbar || hasFixedToolbar && (!hasBlockSelection || isBlockToolsCollapsed));
  const hasBackButton = useHasBackButton();
  return /* @__PURE__ */ jsxs("div", { className: "editor-header edit-post-header", children: [
    hasBackButton && /* @__PURE__ */ jsx(
      motion.div,
      {
        className: "editor-header__back-button",
        variants: backButtonVariations,
        transition: { type: "tween" },
        children: /* @__PURE__ */ jsx(BackButton.Slot, {})
      }
    ),
    /* @__PURE__ */ jsxs(
      motion.div,
      {
        variants: toolbarVariations,
        className: "editor-header__toolbar",
        transition: { type: "tween" },
        children: [
          /* @__PURE__ */ jsx(
            DocumentTools,
            {
              disableBlockTools: isStylesCanvasActive || isTextEditor
            }
          ),
          hasFixedToolbar && isLargeViewport && /* @__PURE__ */ jsx(
            CollapsibleBlockToolbar,
            {
              isCollapsed: isBlockToolsCollapsed,
              onToggle: setIsBlockToolsCollapsed
            }
          )
        ]
      }
    ),
    hasCenter && /* @__PURE__ */ jsx(
      motion.div,
      {
        className: "editor-header__center",
        variants: toolbarVariations,
        transition: { type: "tween" },
        children: /* @__PURE__ */ jsx(DocumentBar, {})
      }
    ),
    /* @__PURE__ */ jsxs(
      motion.div,
      {
        variants: toolbarVariations,
        transition: { type: "tween" },
        className: "editor-header__settings",
        children: [
          !customSaveButton && !isPublishSidebarOpened && /*
           * This button isn't completely hidden by the publish sidebar.
           * We can't hide the whole toolbar when the publish sidebar is open because
           * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
           * We track that DOM node to return focus to the PostPublishButtonOrToggle
           * when the publish sidebar has been closed.
           */
          /* @__PURE__ */ jsx(PostSavedState, { forceIsDirty }),
          /* @__PURE__ */ jsx(PostViewLink, {}),
          /* @__PURE__ */ jsx(
            PreviewDropdown,
            {
              forceIsAutosaveable: forceIsDirty,
              disabled: disablePreviewOption
            }
          ),
          /* @__PURE__ */ jsx(
            PostPreviewButton,
            {
              className: "editor-header__post-preview-button",
              forceIsAutosaveable: forceIsDirty
            }
          ),
          isWideViewport && canBeZoomedOut && /* @__PURE__ */ jsx(ZoomOutToggle, { disabled: isStylesCanvasActive }),
          (isWideViewport || !showIconLabels) && /* @__PURE__ */ jsx(PinnedItems.Slot, { scope: "core" }),
          !customSaveButton && /* @__PURE__ */ jsx(
            PostPublishButtonOrToggle,
            {
              forceIsDirty,
              setEntitiesSavedStatesCallback
            }
          ),
          customSaveButton,
          /* @__PURE__ */ jsx(MoreMenu, {})
        ]
      }
    )
  ] });
}
var header_default = Header;
export {
  header_default as default
};
//# sourceMappingURL=index.js.map
