"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 _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _editor = require("@wordpress/editor");
var _preferences = require("@wordpress/preferences");
var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
var _sidebarNavigationItem = _interopRequireDefault(require("../sidebar-navigation-item"));
var _styleBook = _interopRequireDefault(require("../style-book"));
var _useGlobalStylesRevisions = _interopRequireDefault(require("../global-styles/screen-revisions/use-global-styles-revisions"));
var _sidebarNavigationScreenDetailsFooter = _interopRequireDefault(require("../sidebar-navigation-screen-details-footer"));
var _content = _interopRequireDefault(require("./content"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SidebarNavigationItemGlobalStyles(props) {
  const {
    openGeneralSidebar
  } = (0, _data.useDispatch)(_store.store);
  const {
    setCanvasMode
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const hasGlobalStyleVariations = (0, _data.useSelect)(select => !!select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, []);
  if (hasGlobalStyleVariations) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationItem.default, {
      ...props,
      params: {
        path: '/wp_global_styles'
      },
      uid: "global-styles-navigation-item"
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationItem.default, {
    ...props,
    onClick: () => {
      // Switch to edit mode.
      setCanvasMode('edit');
      // Open global styles sidebar.
      openGeneralSidebar('edit-site/global-styles');
    }
  });
}
function SidebarNavigationScreenGlobalStyles({
  backPath
}) {
  const {
    revisions,
    isLoading: isLoadingRevisions
  } = (0, _useGlobalStylesRevisions.default)();
  const {
    openGeneralSidebar
  } = (0, _data.useDispatch)(_store.store);
  const {
    setIsListViewOpened
  } = (0, _data.useDispatch)(_editor.store);
  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
  const {
    setCanvasMode,
    setEditorCanvasContainerView
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const {
    isViewMode,
    isStyleBookOpened,
    revisionsCount
  } = (0, _data.useSelect)(select => {
    var _globalStyles$_links$;
    const {
      getCanvasMode,
      getEditorCanvasContainerView
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const {
      getEntityRecord,
      __experimentalGetCurrentGlobalStylesId
    } = select(_coreData.store);
    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
    return {
      isViewMode: 'view' === getCanvasMode(),
      isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
      revisionsCount: (_globalStyles$_links$ = globalStyles?._links?.['version-history']?.[0]?.count) !== null && _globalStyles$_links$ !== void 0 ? _globalStyles$_links$ : 0
    };
  }, []);
  const {
    set: setPreference
  } = (0, _data.useDispatch)(_preferences.store);
  const openGlobalStyles = (0, _element.useCallback)(async () => {
    return Promise.all([setPreference('core', 'distractionFree', false), setCanvasMode('edit'), openGeneralSidebar('edit-site/global-styles')]);
  }, [setCanvasMode, openGeneralSidebar, setPreference]);
  const openStyleBook = (0, _element.useCallback)(async () => {
    await openGlobalStyles();
    // Open the Style Book once the canvas mode is set to edit,
    // and the global styles sidebar is open. This ensures that
    // the Style Book is not prematurely closed.
    setEditorCanvasContainerView('style-book');
    setIsListViewOpened(false);
  }, [openGlobalStyles, setEditorCanvasContainerView, setIsListViewOpened]);
  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 hasRevisions = revisionsCount > 0;
  const modifiedDateTime = revisions?.[0]?.modified;
  const shouldShowGlobalStylesFooter = hasRevisions && !isLoadingRevisions && modifiedDateTime;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreen.default, {
      title: (0, _i18n.__)('Styles'),
      description: (0, _i18n.__)('Choose a different style combination for the theme styles.'),
      backPath: backPath,
      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_content.default, {}),
      footer: shouldShowGlobalStylesFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenDetailsFooter.default, {
        record: revisions?.[0],
        onClick: openRevisions
      }),
      actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [!isMobileViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarButton.default, {
          icon: _icons.seen,
          label: (0, _i18n.__)('Style Book'),
          onClick: () => setEditorCanvasContainerView(!isStyleBookOpened ? 'style-book' : undefined),
          isPressed: isStyleBookOpened
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarButton.default, {
          icon: _icons.edit,
          label: (0, _i18n.__)('Edit styles'),
          onClick: async () => await openGlobalStyles()
        })]
      })
    }), isStyleBookOpened && !isMobileViewport && isViewMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styleBook.default, {
      enableResizing: false,
      isSelected: () => false,
      onClick: openStyleBook,
      onSelect: openStyleBook,
      showCloseButton: false,
      showTabs: false
    })]
  });
}
//# sourceMappingURL=index.js.map