"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PrivateBlockToolbar = PrivateBlockToolbar;
exports.default = BlockToolbar;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _blockMover = _interopRequireDefault(require("../block-mover"));
var _blockParentSelector = _interopRequireDefault(require("../block-parent-selector"));
var _blockSwitcher = _interopRequireDefault(require("../block-switcher"));
var _blockControls = _interopRequireDefault(require("../block-controls"));
var _blockToolbarLastItem = _interopRequireDefault(require("./block-toolbar-last-item"));
var _blockSettingsMenu = _interopRequireDefault(require("../block-settings-menu"));
var _blockLock = require("../block-lock");
var _convertToGroupButtons = require("../convert-to-group-buttons");
var _blockEditVisuallyButton = _interopRequireDefault(require("../block-edit-visually-button"));
var _utils = require("./utils");
var _store = require("../../store");
var _blockNameContext = _interopRequireDefault(require("./block-name-context"));
var _navigableToolbar = _interopRequireDefault(require("../navigable-toolbar"));
var _useHasBlockToolbar = require("./use-has-block-toolbar");
var _shuffle = _interopRequireDefault(require("./shuffle"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Renders the block toolbar.
 *
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
 *
 * @param {Object}   props                             Components props.
 * @param {boolean}  props.hideDragHandle              Show or hide the Drag Handle for drag and drop functionality.
 * @param {boolean}  props.focusOnMount                Focus the toolbar when mounted.
 * @param {number}   props.__experimentalInitialIndex  The initial index of the toolbar item to focus.
 * @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.
 * @param {string}   props.variant                     Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
 */
function PrivateBlockToolbar({
  hideDragHandle,
  focusOnMount,
  __experimentalInitialIndex,
  __experimentalOnIndexChange,
  variant = 'unstyled'
}) {
  const {
    blockClientId,
    blockClientIds,
    isDefaultEditingMode,
    blockType,
    toolbarKey,
    shouldShowVisualToolbar,
    showParentSelector,
    isUsingBindings,
    hasParentPattern,
    hasContentOnlyLocking,
    showShuffleButton,
    showSlots,
    showGroupButtons,
    showLockButtons
  } = (0, _data.useSelect)(select => {
    const {
      getBlockName,
      getBlockMode,
      getBlockParents,
      getSelectedBlockClientIds,
      isBlockValid,
      getBlockEditingMode,
      getBlockAttributes,
      getBlockParentsByBlockName,
      getTemplateLock,
      isZoomOutMode
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const selectedBlockClientIds = getSelectedBlockClientIds();
    const selectedBlockClientId = selectedBlockClientIds[0];
    const parents = getBlockParents(selectedBlockClientId);
    const firstParentClientId = parents[parents.length - 1];
    const parentBlockName = getBlockName(firstParentClientId);
    const parentBlockType = (0, _blocks.getBlockType)(parentBlockName);
    const editingMode = getBlockEditingMode(selectedBlockClientId);
    const _isDefaultEditingMode = editingMode === 'default';
    const _blockName = getBlockName(selectedBlockClientId);
    const isValid = selectedBlockClientIds.every(id => isBlockValid(id));
    const isVisual = selectedBlockClientIds.every(id => getBlockMode(id) === 'visual');
    const _isUsingBindings = selectedBlockClientIds.every(clientId => !!getBlockAttributes(clientId)?.metadata?.bindings);
    const _hasParentPattern = selectedBlockClientIds.every(clientId => getBlockParentsByBlockName(clientId, 'core/block', true).length > 0);

    // If one or more selected blocks are locked, do not show the BlockGroupToolbar.
    const _hasTemplateLock = selectedBlockClientIds.some(id => getTemplateLock(id) === 'contentOnly');
    return {
      blockClientId: selectedBlockClientId,
      blockClientIds: selectedBlockClientIds,
      isDefaultEditingMode: _isDefaultEditingMode,
      blockType: selectedBlockClientId && (0, _blocks.getBlockType)(_blockName),
      shouldShowVisualToolbar: isValid && isVisual,
      toolbarKey: `${selectedBlockClientId}${firstParentClientId}`,
      showParentSelector: !isZoomOutMode() && parentBlockType && getBlockEditingMode(firstParentClientId) === 'default' && (0, _blocks.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length === 1 && _isDefaultEditingMode,
      isUsingBindings: _isUsingBindings,
      hasParentPattern: _hasParentPattern,
      hasContentOnlyLocking: _hasTemplateLock,
      showShuffleButton: isZoomOutMode(),
      showSlots: !isZoomOutMode(),
      showGroupButtons: !isZoomOutMode(),
      showLockButtons: !isZoomOutMode()
    };
  }, []);
  const toolbarWrapperRef = (0, _element.useRef)(null);

  // Handles highlighting the current block outline on hover or focus of the
  // block type toolbar area.
  const nodeRef = (0, _element.useRef)();
  const showHoveredOrFocusedGestures = (0, _utils.useShowHoveredOrFocusedGestures)({
    ref: nodeRef
  });
  const isLargeViewport = !(0, _compose.useViewportMatch)('medium', '<');
  const hasBlockToolbar = (0, _useHasBlockToolbar.useHasBlockToolbar)();
  if (!hasBlockToolbar) {
    return null;
  }
  const isMultiToolbar = blockClientIds.length > 1;
  const isSynced = (0, _blocks.isReusableBlock)(blockType) || (0, _blocks.isTemplatePart)(blockType);

  // Shifts the toolbar to make room for the parent block selector.
  const classes = (0, _clsx.default)('block-editor-block-contextual-toolbar', {
    'has-parent': showParentSelector
  });
  const innerClasses = (0, _clsx.default)('block-editor-block-toolbar', {
    'is-synced': isSynced,
    'is-connected': isUsingBindings
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableToolbar.default, {
    focusEditorOnEscape: true,
    className: classes
    /* translators: accessibility text for the block toolbar */,
    "aria-label": (0, _i18n.__)('Block tools')
    // The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
    ,
    variant: variant === 'toolbar' ? undefined : variant,
    focusOnMount: focusOnMount,
    __experimentalInitialIndex: __experimentalInitialIndex,
    __experimentalOnIndexChange: __experimentalOnIndexChange
    // Resets the index whenever the active block changes so
    // this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
    ,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      ref: toolbarWrapperRef,
      className: innerClasses,
      children: [showParentSelector && !isMultiToolbar && isLargeViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockParentSelector.default, {}), (shouldShowVisualToolbar || isMultiToolbar) && !hasParentPattern && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: nodeRef,
        ...showHoveredOrFocusedGestures,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
          className: "block-editor-block-toolbar__block-controls",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSwitcher.default, {
            clientIds: blockClientIds,
            disabled: !isDefaultEditingMode,
            isUsingBindings: isUsingBindings
          }), !isMultiToolbar && showLockButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockLock.BlockLockToolbar, {
            clientId: blockClientId
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockMover.default, {
            clientIds: blockClientIds,
            hideDragHandle: hideDragHandle
          })]
        })
      }), !hasContentOnlyLocking && shouldShowVisualToolbar && isMultiToolbar && showGroupButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_convertToGroupButtons.BlockGroupToolbar, {}), showShuffleButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shuffle.default, {
          clientId: blockClientIds[0],
          as: _components.ToolbarButton
        })
      }), shouldShowVisualToolbar && showSlots && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
          group: "parent",
          className: "block-editor-block-toolbar__slot"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
          group: "block",
          className: "block-editor-block-toolbar__slot"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
          className: "block-editor-block-toolbar__slot"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
          group: "inline",
          className: "block-editor-block-toolbar__slot"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
          group: "other",
          className: "block-editor-block-toolbar__slot"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockNameContext.default.Provider, {
          value: blockType?.name,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockToolbarLastItem.default.Slot, {})
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditVisuallyButton.default, {
        clientIds: blockClientIds
      }), isDefaultEditingMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSettingsMenu.default, {
        clientIds: blockClientIds
      })]
    })
  }, toolbarKey);
}

/**
 * Renders the block toolbar.
 *
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
 *
 * @param {Object}  props                Components props.
 * @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
 * @param {string}  props.variant        Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
 */
function BlockToolbar({
  hideDragHandle,
  variant
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PrivateBlockToolbar, {
    hideDragHandle: hideDragHandle,
    variant: variant,
    focusOnMount: undefined,
    __experimentalInitialIndex: undefined,
    __experimentalOnIndexChange: undefined
  });
}
//# sourceMappingURL=index.js.map