"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PatternCategoryPreviews = PatternCategoryPreviews;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _usePatternsState = _interopRequireDefault(require("../hooks/use-patterns-state"));
var _blockPatternsList = _interopRequireDefault(require("../../block-patterns-list"));
var _usePatternsPaging = _interopRequireDefault(require("../hooks/use-patterns-paging"));
var _patternsFilter = require("./patterns-filter");
var _usePatternCategories = require("./use-pattern-categories");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const noop = () => {};
function PatternCategoryPreviews({
  rootClientId,
  onInsert,
  onHover = noop,
  category,
  showTitlesAsTooltip
}) {
  const [allPatterns,, onClickPattern] = (0, _usePatternsState.default)(onInsert, rootClientId, category?.name);
  const [patternSyncFilter, setPatternSyncFilter] = (0, _element.useState)('all');
  const [patternSourceFilter, setPatternSourceFilter] = (0, _element.useState)('all');
  const availableCategories = (0, _usePatternCategories.usePatternCategories)(rootClientId, patternSourceFilter);
  const scrollContainerRef = (0, _element.useRef)();
  const currentCategoryPatterns = (0, _element.useMemo)(() => allPatterns.filter(pattern => {
    if ((0, _utils.isPatternFiltered)(pattern, patternSourceFilter, patternSyncFilter)) {
      return false;
    }
    if (category.name === _utils.allPatternsCategory.name) {
      return true;
    }
    if (category.name === _utils.myPatternsCategory.name && pattern.type === _utils.INSERTER_PATTERN_TYPES.user) {
      return true;
    }
    if (category.name === 'uncategorized') {
      // The uncategorized category should show all the patterns without any category...
      if (!pattern.categories) {
        return true;
      }

      // ...or with no available category.
      return !pattern.categories.some(catName => availableCategories.some(c => c.name === catName));
    }
    return pattern.categories?.includes(category.name);
  }), [allPatterns, availableCategories, category.name, patternSourceFilter, patternSyncFilter]);
  const pagingProps = (0, _usePatternsPaging.default)(currentCategoryPatterns, category, scrollContainerRef);
  const {
    changePage
  } = pagingProps;

  // Hide block pattern preview on unmount.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  (0, _element.useEffect)(() => () => onHover(null), []);
  const onSetPatternSyncFilter = (0, _element.useCallback)(value => {
    setPatternSyncFilter(value);
    changePage(1);
  }, [setPatternSyncFilter, changePage]);
  const onSetPatternSourceFilter = (0, _element.useCallback)(value => {
    setPatternSourceFilter(value);
    changePage(1);
  }, [setPatternSourceFilter, changePage]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 2,
      className: "block-editor-inserter__patterns-category-panel-header",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
            className: "block-editor-inserter__patterns-category-panel-title",
            size: 13,
            level: 4,
            as: "div",
            children: category.label
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_patternsFilter.PatternsFilter, {
          patternSyncFilter: patternSyncFilter,
          patternSourceFilter: patternSourceFilter,
          setPatternSyncFilter: onSetPatternSyncFilter,
          setPatternSourceFilter: onSetPatternSourceFilter,
          scrollContainerRef: scrollContainerRef,
          category: category
        })]
      }), !currentCategoryPatterns.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
        variant: "muted",
        className: "block-editor-inserter__patterns-category-no-results",
        children: (0, _i18n.__)('No results found')
      })]
    }), currentCategoryPatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsList.default, {
      ref: scrollContainerRef,
      shownPatterns: pagingProps.categoryPatternsAsyncList,
      blockPatterns: pagingProps.categoryPatterns,
      onClickPattern: onClickPattern,
      onHover: onHover,
      label: category.label,
      orientation: "vertical",
      category: category.name,
      isDraggable: true,
      showTitlesAsTooltip: showTitlesAsTooltip,
      patternFilter: patternSourceFilter,
      pagingProps: pagingProps
    })]
  });
}
//# sourceMappingURL=pattern-category-previews.js.map