/**
 * WordPress dependencies
 */
import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { __unstableBlockToolbarLastItem as BlockToolbarLastItem, store as blockEditorStore, useBlockEditingMode } from '@wordpress/block-editor';
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

// Target blocks that should have the View button.
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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 = useBlockEditingMode();
  const onNavigateToEntityRecord = useSelect(select => select(blockEditorStore).getSettings().onNavigateToEntityRecord, []);
  const onViewPage = 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__*/_jsx(BlockToolbarLastItem, {
    children: /*#__PURE__*/_jsx(ToolbarGroup, {
      children: /*#__PURE__*/_jsx(ToolbarButton, {
        name: "view",
        title: __('View'),
        onClick: onViewPage,
        children: __('View')
      })
    })
  });
}

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

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