import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import {
  Icon,
  __experimentalHStack as HStack,
  privateApis as componentsPrivateApis
} 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 {
  privateApis as corePrivateApis,
  store as coreStore
} from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";
import { useAddedBy } from "./hooks";
import { useDefaultTemplateTypes } from "../add-new-template/utils";
import usePatternSettings from "../page-patterns/use-pattern-settings";
import { unlock } from "../../lock-unlock";
const { useGlobalStyle } = unlock(blockEditorPrivateApis);
const { Badge } = unlock(componentsPrivateApis);
const { useEntityRecordsWithPermissions } = unlock(corePrivateApis);
function useAllDefaultTemplateTypes() {
  const defaultTemplateTypes = useDefaultTemplateTypes();
  const { records: staticRecords } = useEntityRecordsWithPermissions(
    "postType",
    "wp_registered_template",
    { per_page: -1 }
  );
  return [
    ...defaultTemplateTypes,
    ...staticRecords?.filter((record) => !record.is_custom).map((record) => {
      return {
        slug: record.slug,
        title: record.title.rendered,
        description: record.description
      };
    })
  ];
}
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: function RenderDescription({ item }) {
    const defaultTemplateTypes = useAllDefaultTemplateTypes();
    const defaultTemplateType = defaultTemplateTypes.find(
      (type) => type.slug === item.slug
    );
    return item.description ? decodeEntities(item.description) : defaultTemplateType?.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 ?? item.author,
  render: AuthorField
};
const activeField = {
  label: __("Status"),
  id: "active",
  getValue: ({ item }) => item._isActive,
  render: function Render({ item }) {
    const isActive = item._isActive;
    return /* @__PURE__ */ jsx(Badge, { intent: isActive ? "success" : "default", children: isActive ? __("Active") : __("Inactive") });
  }
};
const useThemeField = () => {
  const activeTheme = useSelect(
    (select) => select(coreStore).getCurrentTheme()
  );
  return {
    label: __("Compatible Theme"),
    id: "theme",
    getValue: ({ item }) => item.theme,
    render: function Render3({ item }) {
      if (item.theme === activeTheme.stylesheet) {
        return /* @__PURE__ */ jsx(Badge, { intent: "success", children: item.theme });
      }
      return /* @__PURE__ */ jsx(Badge, { intent: "error", children: item.theme });
    }
  };
};
const slugField = {
  label: __("Template Type"),
  id: "slug",
  getValue: ({ item }) => item.slug,
  render: function Render2({ item }) {
    const defaultTemplateTypes = useAllDefaultTemplateTypes();
    const defaultTemplateType = defaultTemplateTypes.find(
      (type) => type.slug === item.slug
    );
    return defaultTemplateType?.title || // translators: %s is the slug of a custom template.
    __("Custom");
  }
};
export {
  activeField,
  authorField,
  descriptionField,
  previewField,
  slugField,
  useThemeField
};
//# sourceMappingURL=fields.js.map
