import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Icon, __experimentalHStack as HStack } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useState, useMemo } from "@wordpress/element";
import { decodeEntities } from "@wordpress/html-entities";
import { parse } from "@wordpress/blocks";
import {
  BlockPreview,
  privateApis as blockEditorPrivateApis
} from "@wordpress/block-editor";
import { EditorProvider } from "@wordpress/editor";
import { useAddedBy } from "./hooks";
import usePatternSettings from "../page-patterns/use-pattern-settings";
import { unlock } from "../../lock-unlock";
const { useGlobalStyle } = unlock(blockEditorPrivateApis);
function PreviewField({ item }) {
  const settings = usePatternSettings();
  const [backgroundColor = "white"] = useGlobalStyle("color.background");
  const blocks = useMemo(() => {
    return parse(item.content.raw);
  }, [item.content.raw]);
  const isEmpty = !blocks?.length;
  return /* @__PURE__ */ jsx(EditorProvider, { post: item, settings, children: /* @__PURE__ */ jsxs(
    "div",
    {
      className: "page-templates-preview-field",
      style: { backgroundColor },
      children: [
        isEmpty && __("Empty template"),
        !isEmpty && /* @__PURE__ */ jsx(BlockPreview.Async, { children: /* @__PURE__ */ jsx(BlockPreview, { blocks }) })
      ]
    }
  ) });
}
const previewField = {
  label: __("Preview"),
  id: "preview",
  render: PreviewField,
  enableSorting: false
};
const descriptionField = {
  label: __("Description"),
  id: "description",
  render: ({ item }) => {
    return item.description && decodeEntities(item.description);
  },
  enableSorting: false,
  enableGlobalSearch: true
};
function AuthorField({ item }) {
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  const { text, icon, imageUrl } = useAddedBy(item.type, item.id);
  return /* @__PURE__ */ jsxs(HStack, { alignment: "left", spacing: 0, children: [
    imageUrl && /* @__PURE__ */ jsx(
      "div",
      {
        className: clsx("page-templates-author-field__avatar", {
          "is-loaded": isImageLoaded
        }),
        children: /* @__PURE__ */ jsx(
          "img",
          {
            onLoad: () => setIsImageLoaded(true),
            alt: "",
            src: imageUrl
          }
        )
      }
    ),
    !imageUrl && /* @__PURE__ */ jsx("div", { className: "page-templates-author-field__icon", children: /* @__PURE__ */ jsx(Icon, { icon }) }),
    /* @__PURE__ */ jsx("span", { className: "page-templates-author-field__name", children: text })
  ] });
}
const authorField = {
  label: __("Author"),
  id: "author",
  getValue: ({ item }) => item.author_text,
  render: AuthorField
};
export {
  authorField,
  descriptionField,
  previewField
};
//# sourceMappingURL=fields.js.map
