"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.previewField = exports.descriptionField = exports.authorField = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _htmlEntities = require("@wordpress/html-entities");
var _blocks = require("@wordpress/blocks");
var _blockEditor = require("@wordpress/block-editor");
var _editor = require("@wordpress/editor");
var _hooks = require("./hooks");
var _usePatternSettings = _interopRequireDefault(require("../page-patterns/use-pattern-settings"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function PreviewField({
  item
}) {
  const settings = (0, _usePatternSettings.default)();
  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
  const blocks = (0, _element.useMemo)(() => {
    return (0, _blocks.parse)(item.content.raw);
  }, [item.content.raw]);
  const isEmpty = !blocks?.length;
  // Wrap everything in a block editor provider to ensure 'styles' that are needed
  // for the previews are synced between the site editor store and the block editor store.
  // Additionally we need to have the `__experimentalBlockPatterns` setting in order to
  // render patterns inside the previews.
  // TODO: Same approach is used in the patterns list and it becomes obvious that some of
  // the block editor settings are needed in context where we don't have the block editor.
  // Explore how we can solve this in a better way.
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.EditorProvider, {
    post: item,
    settings: settings,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "page-templates-preview-field",
      style: {
        backgroundColor
      },
      children: [isEmpty && (0, _i18n.__)('Empty template'), !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview.Async, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview, {
          blocks: blocks
        })
      })]
    })
  });
}
const previewField = exports.previewField = {
  label: (0, _i18n.__)('Preview'),
  id: 'preview',
  render: PreviewField,
  enableSorting: false
};
const descriptionField = exports.descriptionField = {
  label: (0, _i18n.__)('Description'),
  id: 'description',
  render: ({
    item
  }) => {
    return item.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "page-templates-description",
      children: (0, _htmlEntities.decodeEntities)(item.description)
    });
  },
  enableSorting: false,
  enableGlobalSearch: true
};
function AuthorField({
  item
}) {
  const [isImageLoaded, setIsImageLoaded] = (0, _element.useState)(false);
  const {
    text,
    icon,
    imageUrl
  } = (0, _hooks.useAddedBy)(item.type, item.id);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
    alignment: "left",
    spacing: 0,
    children: [imageUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _clsx.default)('page-templates-author-field__avatar', {
        'is-loaded': isImageLoaded
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        onLoad: () => setIsImageLoaded(true),
        alt: "",
        src: imageUrl
      })
    }), !imageUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "page-templates-author-field__icon",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
        icon: icon
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "page-templates-author-field__name",
      children: text
    })]
  });
}
const authorField = exports.authorField = {
  label: (0, _i18n.__)('Author'),
  id: 'author',
  getValue: ({
    item
  }) => item.author_text,
  render: AuthorField
};
//# sourceMappingURL=fields.js.map