"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = DocumentBar;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _keycodes = require("@wordpress/keycodes");
var _coreData = require("@wordpress/core-data");
var _commands = require("@wordpress/commands");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _htmlEntities = require("@wordpress/html-entities");
var _dom = require("@wordpress/dom");
var _constants = require("../../store/constants");
var _store = require("../../store");
var _pageTypeBadge = _interopRequireDefault(require("../../utils/pageTypeBadge"));
var _getTemplateInfo = require("../../utils/get-template-info");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/** @typedef {import("@wordpress/components").IconType} IconType */const MotionButton = (0, _components.__unstableMotion)(_components.Button);

/**
 * This component renders a navigation bar at the top of the editor. It displays the title of the current document,
 * a back button (if applicable), and a command center button. It also handles different states of the document,
 * such as "not found" or "unsynced".
 *
 * @example
 * ```jsx
 * <DocumentBar />
 * ```
 * @param {Object}   props       The component props.
 * @param {string}   props.title A title for the document, defaulting to the document or
 *                               template title currently being edited.
 * @param {IconType} props.icon  An icon for the document, no default.
 *                               (A default icon indicating the document post type is no longer used.)
 *
 * @return {React.ReactNode} The rendered DocumentBar component.
 */
function DocumentBar(props) {
  const {
    postId,
    postType,
    postTypeLabel,
    documentTitle,
    isNotFound,
    templateTitle,
    onNavigateToPreviousEntityRecord,
    isTemplatePreview
  } = (0, _data.useSelect)(select => {
    var _getCurrentTheme;
    const {
      getCurrentPostType,
      getCurrentPostId,
      getEditorSettings,
      getRenderingMode
    } = select(_store.store);
    const {
      getEditedEntityRecord,
      getPostType,
      getCurrentTheme,
      isResolving: isResolvingSelector
    } = select(_coreData.store);
    const _postType = getCurrentPostType();
    const _postId = getCurrentPostId();
    const _document = getEditedEntityRecord('postType', _postType, _postId);
    const {
      default_template_types: templateTypes = []
    } = (_getCurrentTheme = getCurrentTheme()) !== null && _getCurrentTheme !== void 0 ? _getCurrentTheme : {};
    const _templateInfo = (0, _getTemplateInfo.getTemplateInfo)({
      templateTypes,
      template: _document
    });
    const _postTypeLabel = getPostType(_postType)?.labels?.singular_name;
    return {
      postId: _postId,
      postType: _postType,
      postTypeLabel: _postTypeLabel,
      documentTitle: _document.title,
      isNotFound: !_document && !isResolvingSelector('getEditedEntityRecord', 'postType', _postType, _postId),
      templateTitle: _templateInfo.title,
      onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord,
      isTemplatePreview: getRenderingMode() === 'template-locked'
    };
  }, []);
  const {
    open: openCommandCenter
  } = (0, _data.useDispatch)(_commands.store);
  const isReducedMotion = (0, _compose.useReducedMotion)();
  const isTemplate = _constants.TEMPLATE_POST_TYPES.includes(postType);
  const hasBackButton = !!onNavigateToPreviousEntityRecord;
  const entityTitle = isTemplate ? templateTitle : documentTitle;
  const title = props.title || entityTitle;
  const icon = props.icon;
  const pageTypeBadge = (0, _pageTypeBadge.default)(postId);
  const mountedRef = (0, _element.useRef)(false);
  (0, _element.useEffect)(() => {
    mountedRef.current = true;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _clsx.default)('editor-document-bar', {
      'has-back-button': hasBackButton
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
      children: hasBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(MotionButton, {
        className: "editor-document-bar__back",
        icon: (0, _i18n.isRTL)() ? _icons.chevronRightSmall : _icons.chevronLeftSmall,
        onClick: event => {
          event.stopPropagation();
          onNavigateToPreviousEntityRecord();
        },
        size: "compact",
        initial: mountedRef.current ? {
          opacity: 0,
          transform: 'translateX(15%)'
        } : false // Don't show entry animation when DocumentBar mounts.
        ,
        animate: {
          opacity: 1,
          transform: 'translateX(0%)'
        },
        exit: {
          opacity: 0,
          transform: 'translateX(15%)'
        },
        transition: isReducedMotion ? {
          duration: 0
        } : undefined,
        children: (0, _i18n.__)('Back')
      })
    }), !isTemplate && isTemplatePreview && !hasBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
      icon: _icons.layout,
      className: "editor-document-bar__icon-layout"
    }), isNotFound ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
      children: (0, _i18n.__)('Document not found')
    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
      className: "editor-document-bar__command",
      onClick: () => openCommandCenter(),
      size: "compact",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
        className: "editor-document-bar__title"
        // Force entry animation when the back button is added or removed.
        ,

        initial: mountedRef.current ? {
          opacity: 0,
          transform: hasBackButton ? 'translateX(15%)' : 'translateX(-15%)'
        } : false // Don't show entry animation when DocumentBar mounts.
        ,
        animate: {
          opacity: 1,
          transform: 'translateX(0%)'
        },
        transition: isReducedMotion ? {
          duration: 0
        } : undefined,
        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
          icon: icon
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalText, {
          size: "body",
          as: "h1",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: "editor-document-bar__post-title",
            children: title ? (0, _dom.__unstableStripHTML)(title) : (0, _i18n.__)('No title')
          }), pageTypeBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: "editor-document-bar__post-type-label",
            children: `· ${pageTypeBadge}`
          }), postTypeLabel && !props.title && !pageTypeBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: "editor-document-bar__post-type-label",
            children: `· ${(0, _htmlEntities.decodeEntities)(postTypeLabel)}`
          })]
        })]
      }, hasBackButton), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "editor-document-bar__shortcut",
        children: _keycodes.displayShortcut.primary('k')
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map