// packages/editor/src/components/post-template/swap-template-button.js
import { useMemo, useState } from "@wordpress/element";
import { decodeEntities } from "@wordpress/html-entities";
import { __experimentalBlockPatternsList as BlockPatternsList } from "@wordpress/block-editor";
import { MenuItem, Modal, SearchControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useDispatch } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { parse } from "@wordpress/blocks";
import { useAvailableTemplates, useEditedPostContext } from "./hooks.mjs";
import { searchTemplates } from "../../utils/search-templates.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function SwapTemplateModal({ onRequestClose, onSelect }) {
  const { postType, postId } = useEditedPostContext();
  const { editEntityRecord } = useDispatch(coreStore);
  const onTemplateSelect = async (template) => {
    editEntityRecord(
      "postType",
      postType,
      postId,
      // Since we append the default template we need to properly
      // update to an empty string.
      { template: template.isDefault ? "" : template.name },
      { undoIgnore: true }
    );
    onRequestClose();
    onSelect?.();
  };
  return /* @__PURE__ */ jsx(
    Modal,
    {
      title: __("Choose a template"),
      onRequestClose,
      overlayClassName: "editor-post-template__swap-template-modal",
      isFullScreen: true,
      children: /* @__PURE__ */ jsx("div", { className: "editor-post-template__swap-template-modal-content", children: /* @__PURE__ */ jsx(TemplatesList, { onSelect: onTemplateSelect }) })
    }
  );
}
function SwapTemplateButton({ onClick }) {
  const [showModal, setShowModal] = useState(false);
  const availableTemplates = useAvailableTemplates();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      MenuItem,
      {
        disabled: !availableTemplates?.length,
        accessibleWhenDisabled: true,
        onClick: () => setShowModal(true),
        children: __("Change template")
      }
    ),
    showModal && /* @__PURE__ */ jsx(
      SwapTemplateModal,
      {
        onRequestClose: () => setShowModal(false),
        onSelect: onClick
      }
    )
  ] });
}
function TemplatesList({ onSelect }) {
  const [searchValue, setSearchValue] = useState("");
  const availableTemplates = useAvailableTemplates();
  const templatesAsPatterns = useMemo(
    () => availableTemplates.map((template) => ({
      name: template.slug,
      blocks: parse(template.content.raw),
      title: decodeEntities(template.title.rendered),
      id: template.id,
      isDefault: template.isDefault
    })),
    [availableTemplates]
  );
  const filteredBlockTemplates = useMemo(() => {
    return searchTemplates(templatesAsPatterns, searchValue);
  }, [templatesAsPatterns, searchValue]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      SearchControl,
      {
        onChange: setSearchValue,
        value: searchValue,
        label: __("Search"),
        placeholder: __("Search"),
        className: "editor-post-template__swap-template-search"
      }
    ),
    /* @__PURE__ */ jsx(
      BlockPatternsList,
      {
        label: __("Templates"),
        blockPatterns: filteredBlockTemplates,
        onClickPattern: onSelect
      }
    )
  ] });
}
export {
  SwapTemplateModal,
  SwapTemplateButton as default
};
//# sourceMappingURL=swap-template-button.mjs.map
