"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _previewBlockPopover = _interopRequireDefault(require("./preview-block-popover"));
var _blockVariationTransformations = _interopRequireDefault(require("./block-variation-transformations"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Helper hook to group transformations to display them in a specific order in the UI.
 * For now we group only priority content driven transformations(ex. paragraph -> heading).
 *
 * Later on we could also group 'layout' transformations(ex. paragraph -> group) and
 * display them in different sections.
 *
 * @param {Object[]} possibleBlockTransformations The available block transformations.
 * @return {Record<string, Object[]>} The grouped block transformations.
 */function useGroupedTransforms(possibleBlockTransformations) {
  const priorityContentTranformationBlocks = {
    'core/paragraph': 1,
    'core/heading': 2,
    'core/list': 3,
    'core/quote': 4
  };
  const transformations = (0, _element.useMemo)(() => {
    const priorityTextTranformsNames = Object.keys(priorityContentTranformationBlocks);
    const groupedPossibleTransforms = possibleBlockTransformations.reduce((accumulator, item) => {
      const {
        name
      } = item;
      if (priorityTextTranformsNames.includes(name)) {
        accumulator.priorityTextTransformations.push(item);
      } else {
        accumulator.restTransformations.push(item);
      }
      return accumulator;
    }, {
      priorityTextTransformations: [],
      restTransformations: []
    });
    /**
     * If there is only one priority text transformation and it's a Quote,
     * is should move to the rest transformations. This is because Quote can
     * be a container for any block type, so in multi-block selection it will
     * always be suggested, even for non-text blocks.
     */
    if (groupedPossibleTransforms.priorityTextTransformations.length === 1 && groupedPossibleTransforms.priorityTextTransformations[0].name === 'core/quote') {
      const singleQuote = groupedPossibleTransforms.priorityTextTransformations.pop();
      groupedPossibleTransforms.restTransformations.push(singleQuote);
    }
    return groupedPossibleTransforms;
  }, [possibleBlockTransformations]);

  // Order the priority text transformations.
  transformations.priorityTextTransformations.sort(({
    name: currentName
  }, {
    name: nextName
  }) => {
    return priorityContentTranformationBlocks[currentName] < priorityContentTranformationBlocks[nextName] ? -1 : 1;
  });
  return transformations;
}
const BlockTransformationsMenu = ({
  className,
  possibleBlockTransformations,
  possibleBlockVariationTransformations,
  onSelect,
  onSelectVariation,
  blocks
}) => {
  const [hoveredTransformItemName, setHoveredTransformItemName] = (0, _element.useState)();
  const {
    priorityTextTransformations,
    restTransformations
  } = useGroupedTransforms(possibleBlockTransformations);
  // We have to check if both content transformations(priority and rest) are set
  // in order to create a separate MenuGroup for them.
  const hasBothContentTransformations = priorityTextTransformations.length && restTransformations.length;
  const restTransformItems = !!restTransformations.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(RestTransformationItems, {
    restTransformations: restTransformations,
    onSelect: onSelect,
    setHoveredTransformItemName: setHoveredTransformItemName
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
      label: (0, _i18n.__)('Transform to'),
      className: className,
      children: [hoveredTransformItemName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewBlockPopover.default, {
        blocks: (0, _blocks.switchToBlockType)(blocks, hoveredTransformItemName)
      }), !!possibleBlockVariationTransformations?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockVariationTransformations.default, {
        transformations: possibleBlockVariationTransformations,
        blocks: blocks,
        onSelect: onSelectVariation
      }), priorityTextTransformations.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockTranformationItem, {
        item: item,
        onSelect: onSelect,
        setHoveredTransformItemName: setHoveredTransformItemName
      }, item.name)), !hasBothContentTransformations && restTransformItems]
    }), !!hasBothContentTransformations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
      className: className,
      children: restTransformItems
    })]
  });
};
function RestTransformationItems({
  restTransformations,
  onSelect,
  setHoveredTransformItemName
}) {
  return restTransformations.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockTranformationItem, {
    item: item,
    onSelect: onSelect,
    setHoveredTransformItemName: setHoveredTransformItemName
  }, item.name));
}
function BlockTranformationItem({
  item,
  onSelect,
  setHoveredTransformItemName
}) {
  const {
    name,
    icon,
    title,
    isDisabled
  } = item;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuItem, {
    className: (0, _blocks.getBlockMenuDefaultClassName)(name),
    onClick: event => {
      event.preventDefault();
      onSelect(name);
    },
    disabled: isDisabled,
    onMouseLeave: () => setHoveredTransformItemName(null),
    onMouseEnter: () => setHoveredTransformItemName(name),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
      icon: icon,
      showColors: true
    }), title]
  });
}
var _default = exports.default = BlockTransformationsMenu;
//# sourceMappingURL=block-transformations-menu.js.map