"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SwapTemplateButton;
var _element = require("@wordpress/element");
var _htmlEntities = require("@wordpress/html-entities");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _blocks = require("@wordpress/blocks");
var _hooks = require("./hooks");
var _searchTemplates = require("../../utils/search-templates");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SwapTemplateButton({
  onClick
}) {
  const [showModal, setShowModal] = (0, _element.useState)(false);
  const {
    postType,
    postId
  } = (0, _hooks.useEditedPostContext)();
  const availableTemplates = (0, _hooks.useAvailableTemplates)(postType);
  const {
    editEntityRecord
  } = (0, _data.useDispatch)(_coreData.store);
  const onTemplateSelect = async template => {
    editEntityRecord('postType', postType, postId, {
      template: template.name
    }, {
      undoIgnore: true
    });
    setShowModal(false); // Close the template suggestions modal first.
    onClick();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
      disabled: !availableTemplates?.length,
      accessibleWhenDisabled: true,
      onClick: () => setShowModal(true),
      children: (0, _i18n.__)('Change template')
    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
      title: (0, _i18n.__)('Choose a template'),
      onRequestClose: () => setShowModal(false),
      overlayClassName: "editor-post-template__swap-template-modal",
      isFullScreen: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "editor-post-template__swap-template-modal-content",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TemplatesList, {
          postType: postType,
          onSelect: onTemplateSelect
        })
      })
    })]
  });
}
function TemplatesList({
  postType,
  onSelect
}) {
  const [searchValue, setSearchValue] = (0, _element.useState)('');
  const availableTemplates = (0, _hooks.useAvailableTemplates)(postType);
  const templatesAsPatterns = (0, _element.useMemo)(() => availableTemplates.map(template => ({
    name: template.slug,
    blocks: (0, _blocks.parse)(template.content.raw),
    title: (0, _htmlEntities.decodeEntities)(template.title.rendered),
    id: template.id
  })), [availableTemplates]);
  const filteredBlockTemplates = (0, _element.useMemo)(() => {
    return (0, _searchTemplates.searchTemplates)(templatesAsPatterns, searchValue);
  }, [templatesAsPatterns, searchValue]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
      __nextHasNoMarginBottom: true,
      onChange: setSearchValue,
      value: searchValue,
      label: (0, _i18n.__)('Search'),
      placeholder: (0, _i18n.__)('Search'),
      className: "editor-post-template__swap-template-search"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockPatternsList, {
      label: (0, _i18n.__)('Templates'),
      blockPatterns: filteredBlockTemplates,
      onClickPattern: onSelect
    })]
  });
}
//# sourceMappingURL=swap-template-button.js.map