"use strict";

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

/**
 * Internal dependencies
 */

const EMPTY_OBJECT = {};
function useBlockVariationTransforms({
  clientIds,
  blocks
}) {
  const {
    activeBlockVariation,
    blockVariationTransformations
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes,
      canRemoveBlocks
    } = select(_store.store);
    const {
      getActiveBlockVariation,
      getBlockVariations
    } = select(_blocks.store);
    const canRemove = canRemoveBlocks(clientIds);
    // Only handle single selected blocks for now.
    if (blocks.length !== 1 || !canRemove) {
      return EMPTY_OBJECT;
    }
    const [firstBlock] = blocks;
    return {
      blockVariationTransformations: getBlockVariations(firstBlock.name, 'transform'),
      activeBlockVariation: getActiveBlockVariation(firstBlock.name, getBlockAttributes(firstBlock.clientId))
    };
  }, [clientIds, blocks]);
  const transformations = (0, _element.useMemo)(() => {
    return blockVariationTransformations?.filter(({
      name
    }) => name !== activeBlockVariation?.name);
  }, [blockVariationTransformations, activeBlockVariation]);
  return transformations;
}
const BlockVariationTransformations = ({
  transformations,
  onSelect,
  blocks
}) => {
  const [hoveredTransformItemName, setHoveredTransformItemName] = (0, _element.useState)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [hoveredTransformItemName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewBlockPopover.default, {
      blocks: (0, _blocks.cloneBlock)(blocks[0], transformations.find(({
        name
      }) => name === hoveredTransformItemName).attributes)
    }), transformations?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockVariationTranformationItem, {
      item: item,
      onSelect: onSelect,
      setHoveredTransformItemName: setHoveredTransformItemName
    }, item.name))]
  });
};
function BlockVariationTranformationItem({
  item,
  onSelect,
  setHoveredTransformItemName
}) {
  const {
    name,
    icon,
    title
  } = item;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuItem, {
    className: (0, _blocks.getBlockMenuDefaultClassName)(name),
    onClick: event => {
      event.preventDefault();
      onSelect(name);
    },
    onMouseLeave: () => setHoveredTransformItemName(null),
    onMouseEnter: () => setHoveredTransformItemName(name),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
      icon: icon,
      showColors: true
    }), title]
  });
}
var _default = exports.default = BlockVariationTransformations;
//# sourceMappingURL=block-variation-transformations.js.map