"use strict";

var _hooks = require("@wordpress/hooks");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

// Target blocks that should have the View button.
const SUPPORTED_BLOCKS = ['core/navigation-link', 'core/navigation-submenu'];

/**
 * Component that renders the View button for navigation blocks.
 *
 * @param {Object} props            Component props.
 * @param {Object} props.attributes Block attributes.
 * @return {JSX.Element|null} The View button component or null if not applicable.
 */
function NavigationViewButton({
  attributes
}) {
  const {
    kind,
    id,
    type
  } = attributes;
  const blockEditingMode = (0, _blockEditor.useBlockEditingMode)();
  const onNavigateToEntityRecord = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings().onNavigateToEntityRecord, []);
  const onViewPage = (0, _element.useCallback)(() => {
    if (kind === 'post-type' && type === 'page' && id && onNavigateToEntityRecord) {
      onNavigateToEntityRecord({
        postId: id,
        postType: type
      });
    }
  }, [kind, id, type, onNavigateToEntityRecord]);

  // Only show for page-type links, when navigation is available, and when in contentOnly mode.
  if (kind !== 'post-type' || type !== 'page' || !id || !onNavigateToEntityRecord || blockEditingMode !== 'contentOnly') {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__unstableBlockToolbarLastItem, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
        name: "view",
        title: (0, _i18n.__)('View'),
        onClick: onViewPage,
        children: (0, _i18n.__)('View')
      })
    })
  });
}

/**
 * Higher-order component that adds the View button to navigation blocks.
 */
const withNavigationViewButton = (0, _compose.createHigherOrderComponent)(BlockEdit => props => {
  const isSupportedBlock = SUPPORTED_BLOCKS.includes(props.name);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BlockEdit, {
      ...props
    }, "edit"), props.isSelected && isSupportedBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationViewButton, {
      ...props
    })]
  });
}, 'withNavigationViewButton');

// Register the filter.
(0, _hooks.addFilter)('editor.BlockEdit', 'core/editor/with-navigation-view-button', withNavigationViewButton);
//# sourceMappingURL=navigation-link-view-button.js.map