/* wp:polyfill */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.templatePartAuthorField = exports.previewField = exports.patternStatusField = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _blocks = require("@wordpress/blocks");
var _constants = require("../../utils/constants");
var _lockUnlock = require("../../lock-unlock");
var _hooks = require("../page-templates/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function PreviewField({
  item
}) {
  const descriptionId = (0, _element.useId)();
  const description = item.description || item?.excerpt?.raw;
  const isTemplatePart = item.type === _constants.TEMPLATE_PART_POST_TYPE;
  const [backgroundColor] = useGlobalStyle('color.background');
  const blocks = (0, _element.useMemo)(() => {
    var _item$blocks;
    return (_item$blocks = item.blocks) !== null && _item$blocks !== void 0 ? _item$blocks : (0, _blocks.parse)(item.content.raw, {
      __unstableSkipMigrationLogs: true
    });
  }, [item?.content?.raw, item.blocks]);
  const isEmpty = !blocks?.length;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "page-patterns-preview-field",
    style: {
      backgroundColor
    },
    "aria-describedby": !!description ? descriptionId : undefined,
    children: [isEmpty && isTemplatePart && (0, _i18n.__)('Empty template part'), isEmpty && !isTemplatePart && (0, _i18n.__)('Empty pattern'), !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview.Async, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockPreview, {
        blocks: blocks,
        viewportWidth: item.viewportWidth
      })
    }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      hidden: true,
      id: descriptionId,
      children: description
    })]
  });
}
const previewField = exports.previewField = {
  label: (0, _i18n.__)('Preview'),
  id: 'preview',
  render: PreviewField,
  enableSorting: false
};
const SYNC_FILTERS = [{
  value: _constants.PATTERN_SYNC_TYPES.full,
  label: (0, _i18n._x)('Synced', 'pattern (singular)'),
  description: (0, _i18n.__)('Patterns that are kept in sync across the site.')
}, {
  value: _constants.PATTERN_SYNC_TYPES.unsynced,
  label: (0, _i18n._x)('Not synced', 'pattern (singular)'),
  description: (0, _i18n.__)('Patterns that can be changed freely without affecting the site.')
}];
const patternStatusField = exports.patternStatusField = {
  label: (0, _i18n.__)('Sync status'),
  id: 'sync-status',
  render: ({
    item
  }) => {
    const syncStatus = 'wp_pattern_sync_status' in item ? item.wp_pattern_sync_status || _constants.PATTERN_SYNC_TYPES.full : _constants.PATTERN_SYNC_TYPES.unsynced;
    // User patterns can have their sync statuses checked directly.
    // Non-user patterns are all unsynced for the time being.
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: `edit-site-patterns__field-sync-status-${syncStatus}`,
      children: SYNC_FILTERS.find(({
        value
      }) => value === syncStatus).label
    });
  },
  elements: SYNC_FILTERS,
  filterBy: {
    operators: [_constants.OPERATOR_IS],
    isPrimary: true
  },
  enableSorting: false
};
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)(_icons.Icon, {
        icon: icon
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "page-templates-author-field__name",
      children: text
    })]
  });
}
const templatePartAuthorField = exports.templatePartAuthorField = {
  label: (0, _i18n.__)('Author'),
  id: 'author',
  getValue: ({
    item
  }) => item.author_text,
  render: AuthorField,
  filterBy: {
    isPrimary: true
  }
};
//# sourceMappingURL=fields.js.map