"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blockEditor = require("@wordpress/block-editor");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const BlockPreviewPanel = ({
  name,
  variation = ''
}) => {
  var _blockExample$viewpor;
  const blockExample = (0, _blocks.getBlockType)(name)?.example;
  const blocks = (0, _element.useMemo)(() => {
    if (!blockExample) {
      return null;
    }
    const example = {
      ...blockExample,
      attributes: {
        ...blockExample.attributes,
        style: undefined,
        className: variation ? (0, _utils.getVariationClassName)(variation) : blockExample.attributes?.className
      }
    };
    return (0, _blocks.getBlockFromExample)(name, example);
  }, [name, blockExample, variation]);
  const viewportWidth = (_blockExample$viewpor = blockExample?.viewportWidth) !== null && _blockExample$viewpor !== void 0 ? _blockExample$viewpor : 500;
  // Same as height of InserterPreviewPanel.
  const previewHeight = 144;
  const sidebarWidth = 235;
  const scale = sidebarWidth / viewportWidth;
  const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
  if (!blockExample) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
    marginX: 4,
    marginBottom: 4,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-global-styles__block-preview-panel",
      style: {
        maxHeight: previewHeight,
        boxSizing: 'initial'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview, {
        blocks: blocks,
        viewportWidth: viewportWidth,
        minHeight: previewHeight,
        additionalStyles:
        //We want this CSS to be in sync with the one in InserterPreviewPanel.
        [{
          css: `
								body{
									padding: 24px;
									min-height:${Math.round(minHeight)}px;
									display:flex;
									align-items:center;
								}
								.is-root-container { width: 100%; }
							`
        }]
      })
    })
  });
};
var _default = exports.default = BlockPreviewPanel;
//# sourceMappingURL=block-preview-panel.js.map