/* wp:polyfill */
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _coreData = require("@wordpress/core-data");
var _htmlEntities = require("@wordpress/html-entities");
var _compose = require("@wordpress/compose");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const EMPTY_ARRAY = [];
function SuggestionListItem({
  suggestion,
  search,
  onSelect,
  entityForSuggestions
}) {
  const baseCssClass = 'edit-site-custom-template-modal__suggestions_list__list-item';
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite.Item, {
    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      __next40pxDefaultSize: true,
      role: "option",
      className: baseCssClass,
      onClick: () => onSelect(entityForSuggestions.config.getSpecificTemplate(suggestion))
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
      size: "body",
      lineHeight: 1.53846153846 // 20px
      ,
      weight: 500,
      className: `${baseCssClass}__title`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextHighlight, {
        text: (0, _htmlEntities.decodeEntities)(suggestion.name),
        highlight: search
      })
    }), suggestion.link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
      size: "body",
      lineHeight: 1.53846153846 // 20px
      ,
      className: `${baseCssClass}__info`,
      children: suggestion.link
    })]
  });
}
function useSearchSuggestions(entityForSuggestions, search) {
  const {
    config
  } = entityForSuggestions;
  const query = (0, _element.useMemo)(() => ({
    order: 'asc',
    context: 'view',
    search,
    per_page: search ? 20 : 10,
    ...config.queryArgs(search)
  }), [search, config]);
  const {
    records: searchResults,
    hasResolved: searchHasResolved
  } = (0, _coreData.useEntityRecords)(entityForSuggestions.type, entityForSuggestions.slug, query);
  const [suggestions, setSuggestions] = (0, _element.useState)(EMPTY_ARRAY);
  (0, _element.useEffect)(() => {
    if (!searchHasResolved) {
      return;
    }
    let newSuggestions = EMPTY_ARRAY;
    if (searchResults?.length) {
      newSuggestions = searchResults;
      if (config.recordNamePath) {
        newSuggestions = (0, _utils.mapToIHasNameAndId)(newSuggestions, config.recordNamePath);
      }
    }
    // Update suggestions only when the query has resolved, so as to keep
    // the previous results in the UI.
    setSuggestions(newSuggestions);
  }, [searchResults, searchHasResolved]);
  return suggestions;
}
function SuggestionList({
  entityForSuggestions,
  onSelect
}) {
  const [search, setSearch, debouncedSearch] = (0, _compose.useDebouncedInput)();
  const suggestions = useSearchSuggestions(entityForSuggestions, debouncedSearch);
  const {
    labels
  } = entityForSuggestions;
  const [showSearchControl, setShowSearchControl] = (0, _element.useState)(false);
  if (!showSearchControl && suggestions?.length > 9) {
    setShowSearchControl(true);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [showSearchControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
      __nextHasNoMarginBottom: true,
      onChange: setSearch,
      value: search,
      label: labels.search_items,
      placeholder: labels.search_items
    }), !!suggestions?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
      orientation: "vertical",
      role: "listbox",
      className: "edit-site-custom-template-modal__suggestions_list",
      "aria-label": (0, _i18n.__)('Suggestions list'),
      children: suggestions.map(suggestion => /*#__PURE__*/(0, _jsxRuntime.jsx)(SuggestionListItem, {
        suggestion: suggestion,
        search: debouncedSearch,
        onSelect: onSelect,
        entityForSuggestions: entityForSuggestions
      }, suggestion.slug))
    }), debouncedSearch && !suggestions?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
      as: "p",
      className: "edit-site-custom-template-modal__no-results",
      children: labels.not_found
    })]
  });
}
function AddCustomTemplateModalContent({
  onSelect,
  entityForSuggestions
}) {
  const [showSearchEntities, setShowSearchEntities] = (0, _element.useState)(entityForSuggestions.hasGeneralTemplate);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 4,
    className: "edit-site-custom-template-modal__contents-wrapper",
    alignment: "left",
    children: [!showSearchEntities && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
        as: "p",
        children: (0, _i18n.__)('Select whether to create a single template for all items or a specific one.')
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
        className: "edit-site-custom-template-modal__contents",
        gap: "4",
        align: "initial",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FlexItem, {
          isBlock: true,
          as: _components.Button,
          onClick: () => {
            const {
              slug,
              title,
              description,
              templatePrefix
            } = entityForSuggestions.template;
            onSelect({
              slug,
              title,
              description,
              templatePrefix
            });
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
            as: "span",
            weight: 500,
            lineHeight: 1.53846153846 // 20px
            ,
            children: entityForSuggestions.labels.all_items
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
            as: "span",
            lineHeight: 1.53846153846 // 20px
            ,
            children:
            // translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
            (0, _i18n.__)('For all items')
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FlexItem, {
          isBlock: true,
          as: _components.Button,
          onClick: () => {
            setShowSearchEntities(true);
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
            as: "span",
            weight: 500,
            lineHeight: 1.53846153846 // 20px
            ,
            children: entityForSuggestions.labels.singular_name
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
            as: "span",
            lineHeight: 1.53846153846 // 20px
            ,
            children:
            // translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
            (0, _i18n.__)('For a specific item')
          })]
        })]
      })]
    }), showSearchEntities && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
        as: "p",
        children: (0, _i18n.__)('This template will be used only for the specific item chosen.')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SuggestionList, {
        entityForSuggestions: entityForSuggestions,
        onSelect: onSelect
      })]
    })]
  });
}
var _default = exports.default = AddCustomTemplateModalContent;
//# sourceMappingURL=add-custom-template-modal-content.js.map