// packages/block-editor/src/components/inserter/preview-panel.js
import {
  isReusableBlock,
  createBlock,
  getBlockFromExample
} from "@wordpress/blocks";
import { useMemo } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import BlockCard from "../block-card";
import BlockPreview from "../block-preview";
import { jsx, jsxs } from "react/jsx-runtime";
function InserterPreviewPanel({ item }) {
  const { name, title, icon, description, initialAttributes, example } = item;
  const isReusable = isReusableBlock(item);
  const blocks = useMemo(() => {
    if (!example) {
      return createBlock(name, initialAttributes);
    }
    return getBlockFromExample(name, {
      attributes: {
        ...example.attributes,
        ...initialAttributes
      },
      innerBlocks: example.innerBlocks
    });
  }, [name, example, initialAttributes]);
  const previewHeight = 144;
  const sidebarWidth = 280;
  const viewportWidth = example?.viewportWidth ?? 500;
  const scale = sidebarWidth / viewportWidth;
  const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
  return /* @__PURE__ */ jsxs("div", { className: "block-editor-inserter__preview-container", children: [
    /* @__PURE__ */ jsx("div", { className: "block-editor-inserter__preview", children: isReusable || example ? /* @__PURE__ */ jsx("div", { className: "block-editor-inserter__preview-content", children: /* @__PURE__ */ jsx(
      BlockPreview,
      {
        blocks,
        viewportWidth,
        minHeight: previewHeight,
        additionalStyles: (
          //We want this CSS to be in sync with the one in BlockPreviewPanel.
          [
            {
              css: `
										body { 
											padding: 24px;
											min-height:${Math.round(minHeight)}px;
											display:flex;
											align-items:center;
										}
										.is-root-container { width: 100%; }
									`
            }
          ]
        )
      }
    ) }) : /* @__PURE__ */ jsx("div", { className: "block-editor-inserter__preview-content-missing", children: __("No preview available.") }) }),
    !isReusable && /* @__PURE__ */ jsx(
      BlockCard,
      {
        title,
        icon,
        description
      }
    )
  ] });
}
var preview_panel_default = InserterPreviewPanel;
export {
  preview_panel_default as default
};
//# sourceMappingURL=preview-panel.js.map
