// packages/block-library/src/template-part/edit/selection-modal.js
import { useMemo, useState } from "@wordpress/element";
import { __, sprintf } from "@wordpress/i18n";
import { store as noticesStore } from "@wordpress/notices";
import { useDispatch } from "@wordpress/data";
import { __experimentalBlockPatternsList as BlockPatternsList } from "@wordpress/block-editor";
import {
  SearchControl,
  __experimentalHStack as HStack
} from "@wordpress/components";
import {
  useAlternativeBlockPatterns,
  useAlternativeTemplateParts
} from "./utils/hooks";
import { mapTemplatePartToBlockPattern } from "./utils/map-template-part-to-block-pattern";
import { searchPatterns } from "../../utils/search-patterns";
import { jsx, jsxs } from "react/jsx-runtime";
function TemplatePartSelectionModal({
  setAttributes,
  onClose,
  templatePartId = null,
  area,
  clientId
}) {
  const [searchValue, setSearchValue] = useState("");
  const { templateParts } = useAlternativeTemplateParts(
    area,
    templatePartId
  );
  const filteredTemplateParts = useMemo(() => {
    const partsAsPatterns = templateParts.map(
      (templatePart) => mapTemplatePartToBlockPattern(templatePart)
    );
    return searchPatterns(partsAsPatterns, searchValue);
  }, [templateParts, searchValue]);
  const blockPatterns = useAlternativeBlockPatterns(area, clientId);
  const filteredBlockPatterns = useMemo(() => {
    return searchPatterns(blockPatterns, searchValue);
  }, [blockPatterns, searchValue]);
  const { createSuccessNotice } = useDispatch(noticesStore);
  const onTemplatePartSelect = (templatePart) => {
    setAttributes({
      slug: templatePart.slug,
      theme: templatePart.theme,
      area: void 0
    });
    createSuccessNotice(
      sprintf(
        /* translators: %s: template part title. */
        __('Template Part "%s" inserted.'),
        templatePart.title?.rendered || templatePart.slug
      ),
      {
        type: "snackbar"
      }
    );
    onClose();
  };
  const hasTemplateParts = !!filteredTemplateParts.length;
  const hasBlockPatterns = !!filteredBlockPatterns.length;
  return /* @__PURE__ */ jsxs("div", { className: "block-library-template-part__selection-content", children: [
    /* @__PURE__ */ jsx("div", { className: "block-library-template-part__selection-search", children: /* @__PURE__ */ jsx(
      SearchControl,
      {
        __nextHasNoMarginBottom: true,
        onChange: setSearchValue,
        value: searchValue,
        label: __("Search"),
        placeholder: __("Search")
      }
    ) }),
    hasTemplateParts && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h2", { children: __("Existing template parts") }),
      /* @__PURE__ */ jsx(
        BlockPatternsList,
        {
          blockPatterns: filteredTemplateParts,
          onClickPattern: (pattern) => {
            onTemplatePartSelect(pattern.templatePart);
          }
        }
      )
    ] }),
    !hasTemplateParts && !hasBlockPatterns && /* @__PURE__ */ jsx(HStack, { alignment: "center", children: /* @__PURE__ */ jsx("p", { children: __("No results found.") }) })
  ] });
}
export {
  TemplatePartSelectionModal as default
};
//# sourceMappingURL=selection-modal.js.map
