"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.titleField = 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 _async = require("../async");
var _link = _interopRequireWildcard(require("../routes/link"));
var _hooks = require("./hooks");
var _usePatternSettings = _interopRequireDefault(require("../page-patterns/use-pattern-settings"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * 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 {
    onClick
  } = (0, _link.useLink)({
    postId: item.id,
    postType: item.type,
    canvas: 'edit'
  });
  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.jsx)("div", {
      className: "page-templates-preview-field",
      style: {
        backgroundColor
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
        className: "page-templates-preview-field__button",
        type: "button",
        onClick: onClick,
        "aria-label": item.title?.rendered || item.title,
        children: [isEmpty && (0, _i18n.__)('Empty template'), !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_async.Async, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview, {
            blocks: blocks
          })
        })]
      })
    })
  });
}
const previewField = exports.previewField = {
  label: (0, _i18n.__)('Preview'),
  id: 'preview',
  render: PreviewField,
  enableSorting: false
};
function TitleField({
  item
}) {
  const linkProps = {
    params: {
      postId: item.id,
      postType: item.type,
      canvas: 'edit'
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_link.default, {
    ...linkProps,
    children: (0, _htmlEntities.decodeEntities)(item.title?.rendered) || (0, _i18n.__)('(no title)')
  });
}
const titleField = exports.titleField = {
  label: (0, _i18n.__)('Template'),
  id: 'title',
  getValue: ({
    item
  }) => item.title?.rendered,
  render: TitleField,
  enableHiding: false,
  enableGlobalSearch: true
};
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