// packages/block-editor/src/components/block-patterns-list/index.js
import clsx from "clsx";
import { cloneBlock } from "@wordpress/blocks";
import { useEffect, useState, forwardRef, useMemo } from "@wordpress/element";
import {
  Composite,
  __experimentalHStack as HStack
} from "@wordpress/components";
import { VisuallyHidden, Text, Tooltip } from "@wordpress/ui";
import { useInstanceId } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
import { Icon, symbol } from "@wordpress/icons";
import BlockPreview from "../block-preview/index.mjs";
import InserterDraggableBlocks from "../inserter-draggable-blocks/index.mjs";
import BlockPatternsPaging from "../block-patterns-paging/index.mjs";
import { INSERTER_PATTERN_TYPES } from "../inserter/block-patterns-tab/utils.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var WithToolTip = ({ showTooltip, title, children }) => {
  if (showTooltip) {
    return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
      /* @__PURE__ */ jsx(Tooltip.Trigger, { render: children }),
      /* @__PURE__ */ jsx(Tooltip.Popup, { children: title })
    ] });
  }
  return /* @__PURE__ */ jsx(Fragment, { children });
};
function BlockPattern({
  id,
  isDraggable,
  pattern,
  onClick,
  onHover,
  showTitlesAsTooltip,
  category,
  isSelected
}) {
  const [isDragging, setIsDragging] = useState(false);
  const { blocks, viewportWidth } = pattern;
  const instanceId = useInstanceId(BlockPattern);
  const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
  const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
  const patternBlocks = useMemo(() => {
    if (!category || !isDraggable) {
      return blocks;
    }
    return (blocks ?? []).map((block) => {
      const clonedBlock = cloneBlock(block);
      if (clonedBlock.attributes.metadata?.categories?.includes(
        category
      )) {
        clonedBlock.attributes.metadata.categories = [category];
      }
      return clonedBlock;
    });
  }, [blocks, isDraggable, category]);
  return /* @__PURE__ */ jsx(
    InserterDraggableBlocks,
    {
      isEnabled: isDraggable,
      blocks: patternBlocks,
      pattern,
      children: ({ draggable, onDragStart, onDragEnd }) => /* @__PURE__ */ jsx(
        "div",
        {
          className: "block-editor-block-patterns-list__list-item",
          draggable,
          onDragStart: (event) => {
            setIsDragging(true);
            if (onDragStart) {
              onHover?.(null);
              onDragStart(event);
            }
          },
          onDragEnd: (event) => {
            setIsDragging(false);
            if (onDragEnd) {
              onDragEnd(event);
            }
          },
          children: /* @__PURE__ */ jsx(
            WithToolTip,
            {
              showTooltip: showTitlesAsTooltip && !isUserPattern,
              title: pattern.title,
              children: /* @__PURE__ */ jsxs(
                Composite.Item,
                {
                  render: /* @__PURE__ */ jsx(
                    "div",
                    {
                      role: "option",
                      "aria-label": pattern.title,
                      "aria-describedby": pattern.description ? descriptionId : void 0,
                      className: clsx(
                        "block-editor-block-patterns-list__item",
                        {
                          "block-editor-block-patterns-list__list-item-synced": pattern.type === INSERTER_PATTERN_TYPES.user && !pattern.syncStatus,
                          "is-selected": isSelected
                        }
                      )
                    }
                  ),
                  id,
                  onClick: () => {
                    onClick(pattern, blocks);
                    onHover?.(null);
                  },
                  onMouseEnter: () => {
                    if (isDragging) {
                      return;
                    }
                    onHover?.(pattern);
                  },
                  onMouseLeave: () => onHover?.(null),
                  children: [
                    /* @__PURE__ */ jsx(
                      BlockPreview.Async,
                      {
                        placeholder: /* @__PURE__ */ jsx(BlockPatternPlaceholder, {}),
                        children: /* @__PURE__ */ jsx(
                          BlockPreview,
                          {
                            blocks,
                            viewportWidth
                          }
                        )
                      }
                    ),
                    (!showTitlesAsTooltip || isUserPattern) && /* @__PURE__ */ jsxs(
                      HStack,
                      {
                        className: "block-editor-patterns__pattern-details",
                        spacing: 2,
                        children: [
                          isUserPattern && !pattern.syncStatus && /* @__PURE__ */ jsx("div", { className: "block-editor-patterns__pattern-icon-wrapper", children: /* @__PURE__ */ jsx(
                            Icon,
                            {
                              className: "block-editor-patterns__pattern-icon",
                              icon: symbol
                            }
                          ) }),
                          /* @__PURE__ */ jsx(
                            Text,
                            {
                              render: /* @__PURE__ */ jsx("div", {}),
                              className: "block-editor-block-patterns-list__item-title",
                              variant: "body-sm",
                              children: pattern.title
                            }
                          )
                        ]
                      }
                    ),
                    !!pattern.description && /* @__PURE__ */ jsx(VisuallyHidden, { id: descriptionId, children: pattern.description })
                  ]
                }
              )
            }
          )
        }
      )
    }
  );
}
function BlockPatternPlaceholder() {
  return /* @__PURE__ */ jsx("div", { className: "block-editor-block-patterns-list__item is-placeholder" });
}
function BlockPatternsList({
  isDraggable,
  blockPatterns,
  onHover,
  onClickPattern,
  orientation,
  category,
  label = __("Patterns"),
  showTitlesAsTooltip,
  pagingProps
}, ref) {
  const [activeCompositeId, setActiveCompositeId] = useState(void 0);
  const [activePattern, setActivePattern] = useState(null);
  useEffect(() => {
    const firstCompositeItemId = blockPatterns[0]?.name;
    setActiveCompositeId(firstCompositeItemId);
  }, [blockPatterns]);
  const handleClickPattern = (pattern, blocks) => {
    setActivePattern(pattern.name);
    onClickPattern(pattern, blocks);
  };
  return /* @__PURE__ */ jsxs(
    Composite,
    {
      orientation,
      activeId: activeCompositeId,
      setActiveId: setActiveCompositeId,
      role: "listbox",
      className: "block-editor-block-patterns-list",
      "aria-label": label,
      ref,
      children: [
        blockPatterns.map((pattern) => /* @__PURE__ */ jsx(
          BlockPattern,
          {
            id: pattern.name,
            pattern,
            onClick: handleClickPattern,
            onHover,
            isDraggable,
            showTitlesAsTooltip,
            category,
            isSelected: !!activePattern && activePattern === pattern.name
          },
          pattern.name
        )),
        pagingProps && /* @__PURE__ */ jsx(BlockPatternsPaging, { ...pagingProps })
      ]
    }
  );
}
var block_patterns_list_default = forwardRef(BlockPatternsList);
export {
  block_patterns_list_default as default
};
//# sourceMappingURL=index.mjs.map
