/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { edit, seen } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { useViewportMatch } from '@wordpress/compose';
import { useCallback } from '@wordpress/element';
import { store as editorStore } from '@wordpress/editor';
import { store as preferencesStore } from '@wordpress/preferences';

/**
 * Internal dependencies
 */
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import SidebarButton from '../sidebar-button';
import SidebarNavigationItem from '../sidebar-navigation-item';
import StyleBook from '../style-book';
import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
import SidebarNavigationScreenGlobalStylesContent from './content';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function SidebarNavigationItemGlobalStyles(props) {
  const {
    openGeneralSidebar
  } = useDispatch(editSiteStore);
  const {
    setCanvasMode
  } = unlock(useDispatch(editSiteStore));
  const hasGlobalStyleVariations = useSelect(select => !!select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, []);
  if (hasGlobalStyleVariations) {
    return /*#__PURE__*/_jsx(SidebarNavigationItem, {
      ...props,
      params: {
        path: '/wp_global_styles'
      },
      uid: "global-styles-navigation-item"
    });
  }
  return /*#__PURE__*/_jsx(SidebarNavigationItem, {
    ...props,
    onClick: () => {
      // Switch to edit mode.
      setCanvasMode('edit');
      // Open global styles sidebar.
      openGeneralSidebar('edit-site/global-styles');
    }
  });
}
export default function SidebarNavigationScreenGlobalStyles({
  backPath
}) {
  const {
    revisions,
    isLoading: isLoadingRevisions
  } = useGlobalStylesRevisions();
  const {
    openGeneralSidebar
  } = useDispatch(editSiteStore);
  const {
    setIsListViewOpened
  } = useDispatch(editorStore);
  const isMobileViewport = useViewportMatch('medium', '<');
  const {
    setCanvasMode,
    setEditorCanvasContainerView
  } = unlock(useDispatch(editSiteStore));
  const {
    isViewMode,
    isStyleBookOpened,
    revisionsCount
  } = useSelect(select => {
    var _globalStyles$_links$;
    const {
      getCanvasMode,
      getEditorCanvasContainerView
    } = unlock(select(editSiteStore));
    const {
      getEntityRecord,
      __experimentalGetCurrentGlobalStylesId
    } = select(coreStore);
    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
  } = useDispatch(preferencesStore);
  const openGlobalStyles = useCallback(async () => {
    return Promise.all([setPreference('core', 'distractionFree', false), setCanvasMode('edit'), openGeneralSidebar('edit-site/global-styles')]);
  }, [setCanvasMode, openGeneralSidebar, setPreference]);
  const openStyleBook = 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 = 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__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(SidebarNavigationScreen, {
      title: __('Styles'),
      description: __('Choose a different style combination for the theme styles.'),
      backPath: backPath,
      content: /*#__PURE__*/_jsx(SidebarNavigationScreenGlobalStylesContent, {}),
      footer: shouldShowGlobalStylesFooter && /*#__PURE__*/_jsx(SidebarNavigationScreenDetailsFooter, {
        record: revisions?.[0],
        onClick: openRevisions
      }),
      actions: /*#__PURE__*/_jsxs(_Fragment, {
        children: [!isMobileViewport && /*#__PURE__*/_jsx(SidebarButton, {
          icon: seen,
          label: __('Style Book'),
          onClick: () => setEditorCanvasContainerView(!isStyleBookOpened ? 'style-book' : undefined),
          isPressed: isStyleBookOpened
        }), /*#__PURE__*/_jsx(SidebarButton, {
          icon: edit,
          label: __('Edit styles'),
          onClick: async () => await openGlobalStyles()
        })]
      })
    }), isStyleBookOpened && !isMobileViewport && isViewMode && /*#__PURE__*/_jsx(StyleBook, {
      enableResizing: false,
      isSelected: () => false,
      onClick: openStyleBook,
      onSelect: openStyleBook,
      showCloseButton: false,
      showTabs: false
    })]
  });
}
//# sourceMappingURL=index.js.map