// packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
import { __ } from "@wordpress/i18n";
import { useState } from "@wordpress/element";
import { useInstanceId, useViewportMatch } from "@wordpress/compose";
import { chevronRight } from "@wordpress/icons";
import {
  Composite,
  MenuGroup,
  MenuItem,
  Popover,
  VisuallyHidden
} from "@wordpress/components";
import BlockPreview from "../block-preview";
import useTransformedPatterns from "./use-transformed-patterns";
import { jsx, jsxs } from "react/jsx-runtime";
function PatternTransformationsMenu({
  blocks,
  patterns: statePatterns,
  onSelect
}) {
  const [showTransforms, setShowTransforms] = useState(false);
  const patterns = useTransformedPatterns(statePatterns, blocks);
  if (!patterns.length) {
    return null;
  }
  return /* @__PURE__ */ jsxs(MenuGroup, { className: "block-editor-block-switcher__pattern__transforms__menugroup", children: [
    showTransforms && /* @__PURE__ */ jsx(
      PreviewPatternsPopover,
      {
        patterns,
        onSelect
      }
    ),
    /* @__PURE__ */ jsx(
      MenuItem,
      {
        onClick: (event) => {
          event.preventDefault();
          setShowTransforms(!showTransforms);
        },
        icon: chevronRight,
        children: __("Patterns")
      }
    )
  ] });
}
function PreviewPatternsPopover({ patterns, onSelect }) {
  const isMobile = useViewportMatch("medium", "<");
  return /* @__PURE__ */ jsx("div", { className: "block-editor-block-switcher__popover-preview-container", children: /* @__PURE__ */ jsx(
    Popover,
    {
      className: "block-editor-block-switcher__popover-preview",
      placement: isMobile ? "bottom" : "right-start",
      offset: 16,
      children: /* @__PURE__ */ jsx("div", { className: "block-editor-block-switcher__preview is-pattern-list-preview", children: /* @__PURE__ */ jsx(
        BlockPatternsList,
        {
          patterns,
          onSelect
        }
      ) })
    }
  ) });
}
function BlockPatternsList({ patterns, onSelect }) {
  return /* @__PURE__ */ jsx(
    Composite,
    {
      role: "listbox",
      className: "block-editor-block-switcher__preview-patterns-container",
      "aria-label": __("Patterns list"),
      children: patterns.map((pattern) => /* @__PURE__ */ jsx(
        BlockPattern,
        {
          pattern,
          onSelect
        },
        pattern.name
      ))
    }
  );
}
function BlockPattern({ pattern, onSelect }) {
  const baseClassName = "block-editor-block-switcher__preview-patterns-container";
  const descriptionId = useInstanceId(
    BlockPattern,
    `${baseClassName}-list__item-description`
  );
  return /* @__PURE__ */ jsxs("div", { className: `${baseClassName}-list__list-item`, children: [
    /* @__PURE__ */ jsxs(
      Composite.Item,
      {
        render: /* @__PURE__ */ jsx(
          "div",
          {
            role: "option",
            "aria-label": pattern.title,
            "aria-describedby": pattern.description ? descriptionId : void 0,
            className: `${baseClassName}-list__item`
          }
        ),
        onClick: () => onSelect(pattern.transformedBlocks),
        children: [
          /* @__PURE__ */ jsx(
            BlockPreview,
            {
              blocks: pattern.transformedBlocks,
              viewportWidth: pattern.viewportWidth || 500
            }
          ),
          /* @__PURE__ */ jsx("div", { className: `${baseClassName}-list__item-title`, children: pattern.title })
        ]
      }
    ),
    !!pattern.description && /* @__PURE__ */ jsx(VisuallyHidden, { id: descriptionId, children: pattern.description })
  ] });
}
var pattern_transformations_menu_default = PatternTransformationsMenu;
export {
  pattern_transformations_menu_default as default
};
//# sourceMappingURL=pattern-transformations-menu.js.map
