"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _coreData = require("@wordpress/core-data");
var _flatTermSelector = _interopRequireDefault(require("../post-taxonomies/flat-term-selector"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const TagsPanel = () => {
  var _tagLabels$add_new_it, _tagLabels$name;
  const tagLabels = (0, _data.useSelect)(select => {
    const taxonomy = select(_coreData.store).getTaxonomy('post_tag');
    return taxonomy?.labels;
  }, []);
  const addNewItem = (_tagLabels$add_new_it = tagLabels?.add_new_item) !== null && _tagLabels$add_new_it !== void 0 ? _tagLabels$add_new_it : (0, _i18n.__)('Add tag');
  const tagLabel = (_tagLabels$name = tagLabels?.name) !== null && _tagLabels$name !== void 0 ? _tagLabels$name : (0, _i18n.__)('Tags');
  const panelBodyTitle = [(0, _i18n.__)('Suggestion:'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    className: "editor-post-publish-panel__link",
    children: addNewItem
  }, "label")];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
    initialOpen: false,
    title: panelBodyTitle,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: (0, _i18n.sprintf)(
      // translators: %s is the taxonomy name (e.g., "Tags").
      (0, _i18n.__)('%s help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'), tagLabel)
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_flatTermSelector.default, {
      slug: "post_tag",
      __nextHasNoMarginBottom: true
    })]
  });
};
const MaybeTagsPanel = () => {
  const {
    postHasTags,
    siteHasTags,
    isPostTypeSupported
  } = (0, _data.useSelect)(select => {
    const postType = select(_store.store).getCurrentPostType();
    const tagsTaxonomy = select(_coreData.store).getEntityRecord('root', 'taxonomy', 'post_tag');
    const _isPostTypeSupported = tagsTaxonomy?.types?.includes(postType);
    const areTagsFetched = tagsTaxonomy !== undefined;
    const tags = tagsTaxonomy && select(_store.store).getEditedPostAttribute(tagsTaxonomy.rest_base);
    const siteTags = _isPostTypeSupported ? !!select(_coreData.store).getEntityRecords('taxonomy', 'post_tag', {
      per_page: 1
    })?.length : false;
    return {
      postHasTags: !!tags?.length,
      siteHasTags: siteTags,
      isPostTypeSupported: areTagsFetched && _isPostTypeSupported
    };
  }, []);
  const [hadTagsWhenOpeningThePanel] = (0, _element.useState)(postHasTags);

  /**
   * We only want to show the tag panel if the post type supports
   * tags and the site has tags.
   */
  if (!isPostTypeSupported || !siteHasTags) {
    return null;
  }

  /*
   * We only want to show the tag panel if the post didn't have
   * any tags when the user hit the Publish button.
   *
   * We can't use the prop.postHasTags because it'll change to true
   * if the user adds a new tag within the pre-publish panel.
   * This would force a re-render and a new prop.postHasTags check,
   * hiding this panel and keeping the user from adding
   * more than one tag.
   */
  if (!hadTagsWhenOpeningThePanel) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsPanel, {});
  }
  return null;
};
var _default = exports.default = MaybeTagsPanel;
//# sourceMappingURL=maybe-tags-panel.js.map