"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CategoriesEdit;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _blockEditor = require("@wordpress/block-editor");
var _htmlEntities = require("@wordpress/html-entities");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

function CategoriesEdit({
  attributes: {
    displayAsDropdown,
    showHierarchy,
    showPostCounts,
    showOnlyTopLevel,
    showEmpty,
    label,
    showLabel,
    taxonomy: taxonomySlug
  },
  setAttributes,
  className
}) {
  const selectId = (0, _compose.useInstanceId)(CategoriesEdit, 'blocks-category-select');
  const {
    records: allTaxonomies,
    isResolvingTaxonomies
  } = (0, _coreData.useEntityRecords)('root', 'taxonomy');
  const taxonomies = allTaxonomies?.filter(t => t.visibility.public);
  const taxonomy = taxonomies?.find(t => t.slug === taxonomySlug);
  const isHierarchicalTaxonomy = !isResolvingTaxonomies && taxonomy?.hierarchical;
  const query = {
    per_page: -1,
    hide_empty: !showEmpty,
    context: 'view'
  };
  if (isHierarchicalTaxonomy && showOnlyTopLevel) {
    query.parent = 0;
  }
  const {
    records: categories,
    isResolving
  } = (0, _coreData.useEntityRecords)('taxonomy', taxonomySlug, query);
  const getCategoriesList = parentId => {
    if (!categories?.length) {
      return [];
    }
    if (parentId === null) {
      return categories;
    }
    return categories.filter(({
      parent
    }) => parent === parentId);
  };
  const toggleAttribute = attributeName => newValue => setAttributes({
    [attributeName]: newValue
  });
  const renderCategoryName = name => !name ? (0, _i18n.__)('(Untitled)') : (0, _htmlEntities.decodeEntities)(name).trim();
  const renderCategoryList = () => {
    const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
    const categoriesList = getCategoriesList(parentId);
    return categoriesList.map(category => renderCategoryListItem(category));
  };
  const renderCategoryListItem = category => {
    const childCategories = getCategoriesList(category.id);
    const {
      id,
      link,
      count,
      name
    } = category;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
      className: `cat-item cat-item-${id}`,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
        href: link,
        target: "_blank",
        rel: "noreferrer noopener",
        children: renderCategoryName(name)
      }), showPostCounts && ` (${count})`, isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
        className: "children",
        children: childCategories.map(childCategory => renderCategoryListItem(childCategory))
      })]
    }, id);
  };
  const renderCategoryDropdown = () => {
    const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
    const categoriesList = getCategoriesList(parentId);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
        className: "wp-block-categories__label",
        "aria-label": (0, _i18n.__)('Label text'),
        placeholder: taxonomy.name,
        withoutInteractiveFormatting: true,
        value: label,
        onChange: html => setAttributes({
          label: html
        })
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
        as: "label",
        htmlFor: selectId,
        children: label ? label : taxonomy.name
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
        id: selectId,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
          children: (0, _i18n.sprintf)( /* translators: %s: taxonomy's singular name */
          (0, _i18n.__)('Select %s'), taxonomy.labels.singular_name)
        }), categoriesList.map(category => renderCategoryDropdownItem(category, 0))]
      })]
    });
  };
  const renderCategoryDropdownItem = (category, level) => {
    const {
      id,
      count,
      name
    } = category;
    const childCategories = getCategoriesList(id);
    return [/*#__PURE__*/(0, _jsxRuntime.jsxs)("option", {
      className: `level-${level}`,
      children: [Array.from({
        length: level * 3
      }).map(() => '\xa0'), renderCategoryName(name), showPostCounts && ` (${count})`]
    }, id), isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && childCategories.map(childCategory => renderCategoryDropdownItem(childCategory, level + 1))];
  };
  const TagName = !!categories?.length && !displayAsDropdown && !isResolving ? 'ul' : 'div';
  const classes = (0, _clsx.default)(className, {
    'wp-block-categories-list': !!categories?.length && !displayAsDropdown && !isResolving,
    'wp-block-categories-dropdown': !!categories?.length && displayAsDropdown && !isResolving
  });
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: classes
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
    ...blockProps,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
        title: (0, _i18n.__)('Settings'),
        children: [Array.isArray(taxonomies) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
          __nextHasNoMarginBottom: true,
          __next40pxDefaultSize: true,
          label: (0, _i18n.__)('Taxonomy'),
          options: taxonomies.map(t => ({
            label: t.name,
            value: t.slug
          })),
          value: taxonomySlug,
          onChange: selectedTaxonomy => setAttributes({
            taxonomy: selectedTaxonomy
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Display as dropdown'),
          checked: displayAsDropdown,
          onChange: toggleAttribute('displayAsDropdown')
        }), displayAsDropdown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          className: "wp-block-categories__indentation",
          label: (0, _i18n.__)('Show label'),
          checked: showLabel,
          onChange: toggleAttribute('showLabel')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Show post counts'),
          checked: showPostCounts,
          onChange: toggleAttribute('showPostCounts')
        }), isHierarchicalTaxonomy && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Show only top level terms'),
          checked: showOnlyTopLevel,
          onChange: toggleAttribute('showOnlyTopLevel')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Show empty terms'),
          checked: showEmpty,
          onChange: toggleAttribute('showEmpty')
        }), isHierarchicalTaxonomy && !showOnlyTopLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
          __nextHasNoMarginBottom: true,
          label: (0, _i18n.__)('Show hierarchy'),
          checked: showHierarchy,
          onChange: toggleAttribute('showHierarchy')
        })]
      })
    }), isResolving && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
      icon: _icons.pin,
      label: (0, _i18n.__)('Terms'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
    }), !isResolving && categories?.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: taxonomy.labels.no_terms
    }), !isResolving && categories?.length > 0 && (displayAsDropdown ? renderCategoryDropdown() : renderCategoryList())]
  });
}
//# sourceMappingURL=edit.js.map