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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SaveButton;
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _coreData = require("@wordpress/core-data");
var _keycodes = require("@wordpress/keycodes");
var _router = require("@wordpress/router");
var _editor = require("@wordpress/editor");
var _store = require("../../store");
var _isPreviewingTheme = require("../../utils/is-previewing-theme");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useLocation
} = (0, _lockUnlock.unlock)(_router.privateApis);
function SaveButton({
  className = 'edit-site-save-button__button',
  variant = 'primary',
  showTooltip = true,
  showReviewMessage,
  icon,
  size,
  __next40pxDefaultSize = false
}) {
  const {
    params
  } = useLocation();
  const {
    setIsSaveViewOpened
  } = (0, _data.useDispatch)(_store.store);
  const {
    saveDirtyEntities
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_editor.store));
  const {
    dirtyEntityRecords
  } = (0, _editor.useEntitiesSavedStatesIsDirty)();
  const {
    isSaving,
    isSaveViewOpen,
    previewingThemeName
  } = (0, _data.useSelect)(select => {
    const {
      isSavingEntityRecord,
      isResolving
    } = select(_coreData.store);
    const {
      isSaveViewOpened
    } = select(_store.store);
    const isActivatingTheme = isResolving('activateTheme');
    const currentlyPreviewingThemeId = (0, _isPreviewingTheme.currentlyPreviewingTheme)();
    return {
      isSaving: dirtyEntityRecords.some(record => isSavingEntityRecord(record.kind, record.name, record.key)) || isActivatingTheme,
      isSaveViewOpen: isSaveViewOpened(),
      // Do not call `getTheme` with null, it will cause a request to
      // the server.
      previewingThemeName: currentlyPreviewingThemeId ? select(_coreData.store).getTheme(currentlyPreviewingThemeId)?.name?.rendered : undefined
    };
  }, [dirtyEntityRecords]);
  const hasDirtyEntities = !!dirtyEntityRecords.length;
  let isOnlyCurrentEntityDirty;
  // Check if the current entity is the only entity with changes.
  // We have some extra logic for `wp_global_styles` for now, that
  // is used in navigation sidebar.
  if (dirtyEntityRecords.length === 1) {
    if (params.postId) {
      isOnlyCurrentEntityDirty = `${dirtyEntityRecords[0].key}` === params.postId && dirtyEntityRecords[0].name === params.postType;
    } else if (params.path?.includes('wp_global_styles')) {
      isOnlyCurrentEntityDirty = dirtyEntityRecords[0].name === 'globalStyles';
    }
  }
  const disabled = isSaving || !hasDirtyEntities && !(0, _isPreviewingTheme.isPreviewingTheme)();
  const getLabel = () => {
    if ((0, _isPreviewingTheme.isPreviewingTheme)()) {
      if (isSaving) {
        return (0, _i18n.sprintf)(/* translators: %s: The name of theme to be activated. */
        (0, _i18n.__)('Activating %s'), previewingThemeName);
      } else if (disabled) {
        return (0, _i18n.__)('Saved');
      } else if (hasDirtyEntities) {
        return (0, _i18n.sprintf)(/* translators: %s: The name of theme to be activated. */
        (0, _i18n.__)('Activate %s & Save'), previewingThemeName);
      }
      return (0, _i18n.sprintf)(/* translators: %s: The name of theme to be activated. */
      (0, _i18n.__)('Activate %s'), previewingThemeName);
    }
    if (isSaving) {
      return (0, _i18n.__)('Saving');
    }
    if (disabled) {
      return (0, _i18n.__)('Saved');
    }
    if (!isOnlyCurrentEntityDirty && showReviewMessage) {
      return (0, _i18n.sprintf)(
      // translators: %d: number of unsaved changes (number).
      (0, _i18n._n)('Review %d change…', 'Review %d changes…', dirtyEntityRecords.length), dirtyEntityRecords.length);
    }
    return (0, _i18n.__)('Save');
  };
  const label = getLabel();
  const onClick = isOnlyCurrentEntityDirty ? () => saveDirtyEntities({
    dirtyEntityRecords
  }) : () => setIsSaveViewOpened(true);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    variant: variant,
    className: className,
    "aria-disabled": disabled,
    "aria-expanded": isSaveViewOpen,
    isBusy: isSaving,
    onClick: disabled ? undefined : onClick,
    label: label
    /*
     * We want the tooltip to show the keyboard shortcut only when the
     * button does something, i.e. when it's not disabled.
     */,
    shortcut: disabled ? undefined : _keycodes.displayShortcut.primary('s')
    /*
     * Displaying the keyboard shortcut conditionally makes the tooltip
     * itself show conditionally. This would trigger a full-rerendering
     * of the button that we want to avoid. By setting `showTooltip`,
     * the tooltip is always rendered even when there's no keyboard shortcut.
     */,
    showTooltip: showTooltip,
    icon: icon,
    __next40pxDefaultSize: __next40pxDefaultSize,
    size: size,
    children: label
  });
}
//# sourceMappingURL=index.js.map