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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SavePanel;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _editor = require("@wordpress/editor");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _coreData = require("@wordpress/core-data");
var _router = require("@wordpress/router");
var _element = require("@wordpress/element");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _useActivateTheme = require("../../utils/use-activate-theme");
var _useActualCurrentTheme = require("../../utils/use-actual-current-theme");
var _isPreviewingTheme = require("../../utils/is-previewing-theme");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  EntitiesSavedStatesExtensible,
  NavigableRegion
} = (0, _lockUnlock.unlock)(_editor.privateApis);
const {
  useLocation
} = (0, _lockUnlock.unlock)(_router.privateApis);
const EntitiesSavedStatesForPreview = ({
  onClose,
  renderDialog
}) => {
  var _currentTheme$name$re, _previewingTheme$name;
  const isDirtyProps = (0, _editor.useEntitiesSavedStatesIsDirty)();
  let activateSaveLabel;
  if (isDirtyProps.isDirty) {
    activateSaveLabel = (0, _i18n.__)('Activate & Save');
  } else {
    activateSaveLabel = (0, _i18n.__)('Activate');
  }
  const currentTheme = (0, _useActualCurrentTheme.useActualCurrentTheme)();
  const previewingTheme = (0, _data.useSelect)(select => select(_coreData.store).getCurrentTheme(), []);
  const additionalPrompt = /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
    children: (0, _i18n.sprintf)(/* translators: 1: The name of active theme, 2: The name of theme to be activated. */
    (0, _i18n.__)('Saving your changes will change your active theme from %1$s to %2$s.'), (_currentTheme$name$re = currentTheme?.name?.rendered) !== null && _currentTheme$name$re !== void 0 ? _currentTheme$name$re : '...', (_previewingTheme$name = previewingTheme?.name?.rendered) !== null && _previewingTheme$name !== void 0 ? _previewingTheme$name : '...')
  });
  const activateTheme = (0, _useActivateTheme.useActivateTheme)();
  const onSave = async values => {
    await activateTheme();
    return values;
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(EntitiesSavedStatesExtensible, {
    ...isDirtyProps,
    additionalPrompt,
    close: onClose,
    onSave,
    saveEnabled: true,
    saveLabel: activateSaveLabel,
    renderDialog
  });
};
const _EntitiesSavedStates = ({
  onClose,
  renderDialog
}) => {
  if ((0, _isPreviewingTheme.isPreviewingTheme)()) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EntitiesSavedStatesForPreview, {
      onClose: onClose,
      renderDialog: renderDialog
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.EntitiesSavedStates, {
    close: onClose,
    renderDialog: renderDialog
  });
};
function SavePanel() {
  const {
    query
  } = useLocation();
  const {
    canvas = 'view'
  } = query;
  const {
    isSaveViewOpen,
    isDirty,
    isSaving
  } = (0, _data.useSelect)(select => {
    const {
      __experimentalGetDirtyEntityRecords,
      isSavingEntityRecord,
      isResolving
    } = select(_coreData.store);
    const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
    const isActivatingTheme = isResolving('activateTheme');
    const {
      isSaveViewOpened
    } = (0, _lockUnlock.unlock)(select(_store.store));

    // The currently selected entity to display.
    // Typically template or template part in the site editor.
    return {
      isSaveViewOpen: isSaveViewOpened(),
      isDirty: dirtyEntityRecords.length > 0,
      isSaving: dirtyEntityRecords.some(record => isSavingEntityRecord(record.kind, record.name, record.key)) || isActivatingTheme
    };
  }, []);
  const {
    setIsSaveViewOpened
  } = (0, _data.useDispatch)(_store.store);
  const onClose = () => setIsSaveViewOpened(false);
  (0, _element.useEffect)(() => {
    setIsSaveViewOpened(false);
  }, [canvas, setIsSaveViewOpened]);
  if (canvas === 'view') {
    return isSaveViewOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
      className: "edit-site-save-panel__modal",
      onRequestClose: onClose,
      __experimentalHideHeader: true,
      contentLabel: (0, _i18n.__)('Save site, content, and template changes'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EntitiesSavedStates, {
        onClose: onClose
      })
    }) : null;
  }
  const activateSaveEnabled = (0, _isPreviewingTheme.isPreviewingTheme)() || isDirty;
  const disabled = isSaving || !activateSaveEnabled;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavigableRegion, {
    className: (0, _clsx.default)('edit-site-layout__actions', {
      'is-entity-save-view-open': isSaveViewOpen
    }),
    ariaLabel: (0, _i18n.__)('Save panel'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _clsx.default)('edit-site-editor__toggle-save-panel', {
        'screen-reader-text': isSaveViewOpen
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        __next40pxDefaultSize: true,
        variant: "secondary",
        className: "edit-site-editor__toggle-save-panel-button",
        onClick: () => setIsSaveViewOpened(true),
        "aria-haspopup": "dialog",
        disabled: disabled,
        accessibleWhenDisabled: true,
        children: (0, _i18n.__)('Open save panel')
      })
    }), isSaveViewOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EntitiesSavedStates, {
      onClose: onClose,
      renderDialog: true
    })]
  });
}
//# sourceMappingURL=index.js.map