"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _blockPreview = _interopRequireDefault(require("../block-preview"));
var _inserterDraggableBlocks = _interopRequireDefault(require("../inserter-draggable-blocks"));
var _blockPatternsPaging = _interopRequireDefault(require("../block-patterns-paging"));
var _utils = require("../inserter/block-patterns-tab/utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const WithToolTip = ({
  showTooltip,
  title,
  children
}) => {
  if (showTooltip) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
      text: title,
      children: children
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: children
  });
};
function BlockPattern({
  id,
  isDraggable,
  pattern,
  onClick,
  onHover,
  showTitlesAsTooltip,
  category
}) {
  const [isDragging, setIsDragging] = (0, _element.useState)(false);
  const {
    blocks,
    viewportWidth
  } = pattern;
  const instanceId = (0, _compose.useInstanceId)(BlockPattern);
  const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
  const isUserPattern = pattern.type === _utils.INSERTER_PATTERN_TYPES.user;

  // When we have a selected category and the pattern is draggable, we need to update the
  // pattern's categories in metadata to only contain the selected category, and pass this to
  // InserterDraggableBlocks component. We do that because we use this information for pattern
  // shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
  const patternBlocks = (0, _element.useMemo)(() => {
    if (!category || !isDraggable) {
      return blocks;
    }
    return (blocks !== null && blocks !== void 0 ? blocks : []).map(block => {
      const clonedBlock = (0, _blocks.cloneBlock)(block);
      if (clonedBlock.attributes.metadata?.categories?.includes(category)) {
        clonedBlock.attributes.metadata.categories = [category];
      }
      return clonedBlock;
    });
  }, [blocks, isDraggable, category]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterDraggableBlocks.default, {
    isEnabled: isDraggable,
    blocks: patternBlocks,
    pattern: pattern,
    children: ({
      draggable,
      onDragStart,
      onDragEnd
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-editor-block-patterns-list__list-item",
      draggable: draggable,
      onDragStart: event => {
        setIsDragging(true);
        if (onDragStart) {
          onHover?.(null);
          onDragStart(event);
        }
      },
      onDragEnd: event => {
        setIsDragging(false);
        if (onDragEnd) {
          onDragEnd(event);
        }
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WithToolTip, {
        showTooltip: showTitlesAsTooltip && !isUserPattern,
        title: pattern.title,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite.Item, {
          render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            role: "option",
            "aria-label": pattern.title,
            "aria-describedby": pattern.description ? descriptionId : undefined,
            className: (0, _clsx.default)('block-editor-block-patterns-list__item', {
              'block-editor-block-patterns-list__list-item-synced': pattern.type === _utils.INSERTER_PATTERN_TYPES.user && !pattern.syncStatus
            })
          }),
          id: id,
          onClick: () => {
            onClick(pattern, blocks);
            onHover?.(null);
          },
          onMouseEnter: () => {
            if (isDragging) {
              return;
            }
            onHover?.(pattern);
          },
          onMouseLeave: () => onHover?.(null),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default.Async, {
            placeholder: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPatternPlaceholder, {}),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default, {
              blocks: blocks,
              viewportWidth: viewportWidth
            })
          }), (!showTitlesAsTooltip || isUserPattern) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
            className: "block-editor-patterns__pattern-details",
            spacing: 2,
            children: [isUserPattern && !pattern.syncStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "block-editor-patterns__pattern-icon-wrapper",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                className: "block-editor-patterns__pattern-icon",
                icon: _icons.symbol
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "block-editor-block-patterns-list__item-title",
              children: pattern.title
            })]
          }), !!pattern.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
            id: descriptionId,
            children: pattern.description
          })]
        })
      })
    })
  });
}
function BlockPatternPlaceholder() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "block-editor-block-patterns-list__item is-placeholder"
  });
}
function BlockPatternsList({
  isDraggable,
  blockPatterns,
  onHover,
  onClickPattern,
  orientation,
  label = (0, _i18n.__)('Block patterns'),
  category,
  showTitlesAsTooltip,
  pagingProps
}, ref) {
  const [activeCompositeId, setActiveCompositeId] = (0, _element.useState)(undefined);
  (0, _element.useEffect)(() => {
    // Reset the active composite item whenever the available patterns change,
    // to make sure that Composite widget can receive focus correctly when its
    // composite items change. The first composite item will receive focus.
    const firstCompositeItemId = blockPatterns[0]?.name;
    setActiveCompositeId(firstCompositeItemId);
  }, [blockPatterns]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite, {
    orientation: orientation,
    activeId: activeCompositeId,
    setActiveId: setActiveCompositeId,
    role: "listbox",
    className: "block-editor-block-patterns-list",
    "aria-label": label,
    ref: ref,
    children: [blockPatterns.map(pattern => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPattern, {
      id: pattern.name,
      pattern: pattern,
      onClick: onClickPattern,
      onHover: onHover,
      isDraggable: isDraggable,
      showTitlesAsTooltip: showTitlesAsTooltip,
      category: category
    }, pattern.name)), pagingProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsPaging.default, {
      ...pagingProps
    })]
  });
}
var _default = exports.default = (0, _element.forwardRef)(BlockPatternsList);
//# sourceMappingURL=index.js.map