"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SidebarNavigationItemGlobalStyles = SidebarNavigationItemGlobalStyles;
exports.default = SidebarNavigationScreenGlobalStyles;
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _preferences = require("@wordpress/preferences");
var _router = require("@wordpress/router");
var _url = require("@wordpress/url");
var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _sidebarNavigationItem = _interopRequireDefault(require("../sidebar-navigation-item"));
var _useGlobalStylesRevisions = _interopRequireDefault(require("../global-styles/screen-revisions/use-global-styles-revisions"));
var _sidebarNavigationScreenDetailsFooter = _interopRequireDefault(require("../sidebar-navigation-screen-details-footer"));
var _sidebarNavigationScreenMain = require("../sidebar-navigation-screen-main");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useLocation,
  useHistory
} = (0, _lockUnlock.unlock)(_router.privateApis);
function SidebarNavigationItemGlobalStyles(props) {
  const {
    name
  } = useLocation();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationItem.default, {
    ...props,
    "aria-current": name === 'styles'
  });
}
function SidebarNavigationScreenGlobalStyles() {
  const history = useHistory();
  const {
    path
  } = useLocation();
  const {
    revisions,
    isLoading: isLoadingRevisions,
    revisionsCount
  } = (0, _useGlobalStylesRevisions.default)();
  const {
    openGeneralSidebar
  } = (0, _data.useDispatch)(_store.store);
  const {
    setEditorCanvasContainerView
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const {
    set: setPreference
  } = (0, _data.useDispatch)(_preferences.store);
  const openGlobalStyles = (0, _element.useCallback)(async () => {
    history.navigate((0, _url.addQueryArgs)(path, {
      canvas: 'edit'
    }), {
      transition: 'canvas-mode-edit-transition'
    });
    return Promise.all([setPreference('core', 'distractionFree', false), openGeneralSidebar('edit-site/global-styles')]);
  }, [path, history, openGeneralSidebar, setPreference]);
  const openRevisions = (0, _element.useCallback)(async () => {
    await openGlobalStyles();
    // Open the global styles revisions once the canvas mode is set to edit,
    // and the global styles sidebar is open. The global styles UI is responsible
    // for redirecting to the revisions screen once the editor canvas container
    // has been set to 'global-styles-revisions'.
    setEditorCanvasContainerView('global-styles-revisions');
  }, [openGlobalStyles, setEditorCanvasContainerView]);

  // If there are no revisions, do not render a footer.
  const shouldShowGlobalStylesFooter = !!revisionsCount && !isLoadingRevisions;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreen.default, {
      title: (0, _i18n.__)('Design'),
      isRoot: true,
      description: (0, _i18n.__)('Customize the appearance of your website using the block editor.'),
      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenMain.MainSidebarNavigationContent, {
        activeItem: "styles-navigation-item"
      }),
      footer: shouldShowGlobalStylesFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenDetailsFooter.default, {
        record: revisions?.[0],
        revisionsCount: revisionsCount,
        onClick: openRevisions
      })
    })
  });
}
//# sourceMappingURL=index.js.map