"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PreviewTypography;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _editor = require("@wordpress/editor");
var _lockUnlock = require("../../lock-unlock");
var _previewStyles = require("./font-library-modal/utils/preview-styles");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle,
  GlobalStylesContext
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const {
  mergeBaseAndUserConfigs
} = (0, _lockUnlock.unlock)(_editor.privateApis);
function PreviewTypography({
  fontSize,
  variation
}) {
  const {
    base
  } = (0, _element.useContext)(GlobalStylesContext);
  let config = base;
  if (variation) {
    config = mergeBaseAndUserConfigs(base, variation);
  }
  const [textColor] = useGlobalStyle('color.text');
  const [bodyFontFamilies, headingFontFamilies] = (0, _utils.getFontFamilies)(config);
  const bodyPreviewStyle = bodyFontFamilies ? (0, _previewStyles.getFamilyPreviewStyle)(bodyFontFamilies) : {};
  const headingPreviewStyle = headingFontFamilies ? (0, _previewStyles.getFamilyPreviewStyle)(headingFontFamilies) : {};
  if (textColor) {
    bodyPreviewStyle.color = textColor;
    headingPreviewStyle.color = textColor;
  }
  if (fontSize) {
    bodyPreviewStyle.fontSize = fontSize;
    headingPreviewStyle.fontSize = fontSize;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
    animate: {
      scale: 1,
      opacity: 1
    },
    initial: {
      scale: 0.1,
      opacity: 0
    },
    transition: {
      delay: 0.3,
      type: 'tween'
    },
    style: {
      textAlign: 'center',
      lineHeight: 1
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: headingPreviewStyle,
      children: (0, _i18n._x)('A', 'Uppercase letter A')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: bodyPreviewStyle,
      children: (0, _i18n._x)('a', 'Lowercase letter A')
    })]
  });
}
//# sourceMappingURL=typography-example.js.map