/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { __, isRTL } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { Button, __experimentalText as Text, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';
import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
import { displayShortcut } from '@wordpress/keycodes';
import { store as coreStore } from '@wordpress/core-data';
import { store as commandsStore } from '@wordpress/commands';
import { useRef, useEffect } from '@wordpress/element';
import { useReducedMotion } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';

/**
 * Internal dependencies
 */
import { TEMPLATE_POST_TYPES } from '../../store/constants';
import { store as editorStore } from '../../store';
import usePageTypeBadge from '../../utils/pageTypeBadge';
import { getTemplateInfo } from '../../utils/get-template-info';

/** @typedef {import("@wordpress/components").IconType} IconType */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const MotionButton = motion(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.
 */
export default function DocumentBar(props) {
  const {
    postId,
    postType,
    postTypeLabel,
    documentTitle,
    isNotFound,
    templateTitle,
    onNavigateToPreviousEntityRecord,
    isTemplatePreview
  } = useSelect(select => {
    var _getCurrentTheme;
    const {
      getCurrentPostType,
      getCurrentPostId,
      getEditorSettings,
      getRenderingMode
    } = select(editorStore);
    const {
      getEditedEntityRecord,
      getPostType,
      getCurrentTheme,
      isResolving: isResolvingSelector
    } = select(coreStore);
    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 = 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
  } = useDispatch(commandsStore);
  const isReducedMotion = useReducedMotion();
  const isTemplate = TEMPLATE_POST_TYPES.includes(postType);
  const hasBackButton = !!onNavigateToPreviousEntityRecord;
  const entityTitle = isTemplate ? templateTitle : documentTitle;
  const title = props.title || entityTitle;
  const icon = props.icon;
  const pageTypeBadge = usePageTypeBadge(postId);
  const mountedRef = useRef(false);
  useEffect(() => {
    mountedRef.current = true;
  }, []);
  return /*#__PURE__*/_jsxs("div", {
    className: clsx('editor-document-bar', {
      'has-back-button': hasBackButton
    }),
    children: [/*#__PURE__*/_jsx(AnimatePresence, {
      children: hasBackButton && /*#__PURE__*/_jsx(MotionButton, {
        className: "editor-document-bar__back",
        icon: isRTL() ? chevronRightSmall : 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: __('Back')
      })
    }), !isTemplate && isTemplatePreview && !hasBackButton && /*#__PURE__*/_jsx(BlockIcon, {
      icon: layout,
      className: "editor-document-bar__icon-layout"
    }), isNotFound ? /*#__PURE__*/_jsx(Text, {
      children: __('Document not found')
    }) : /*#__PURE__*/_jsxs(Button, {
      className: "editor-document-bar__command",
      onClick: () => openCommandCenter(),
      size: "compact",
      children: [/*#__PURE__*/_jsxs(motion.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__*/_jsx(BlockIcon, {
          icon: icon
        }), /*#__PURE__*/_jsxs(Text, {
          size: "body",
          as: "h1",
          children: [/*#__PURE__*/_jsx("span", {
            className: "editor-document-bar__post-title",
            children: title ? stripHTML(title) : __('No title')
          }), pageTypeBadge && /*#__PURE__*/_jsx("span", {
            className: "editor-document-bar__post-type-label",
            children: `· ${pageTypeBadge}`
          }), postTypeLabel && !props.title && !pageTypeBadge && /*#__PURE__*/_jsx("span", {
            className: "editor-document-bar__post-type-label",
            children: `· ${decodeEntities(postTypeLabel)}`
          })]
        })]
      }, hasBackButton), /*#__PURE__*/_jsx("span", {
        className: "editor-document-bar__shortcut",
        children: displayShortcut.primary('k')
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map