/**
 * WordPress dependencies
 */
import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
import { Card, CardBody } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { store as editorStore } from '@wordpress/editor';
import { useEffect } from '@wordpress/element';

/**
 * Internal dependencies
 */
import ScreenHeader from './header';
import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const {
  useZoomOut
} = unlock(blockEditorPrivateApis);
function ScreenStyleVariations() {
  // Style Variations should only be previewed in with
  // - a "zoomed out" editor (but not when in preview mode)
  // - "Desktop" device preview
  const isPreviewMode = useSelect(select => {
    return select(blockEditorStore).getSettings().isPreviewMode;
  }, []);
  const {
    setDeviceType
  } = useDispatch(editorStore);
  useZoomOut(!isPreviewMode);
  useEffect(() => {
    setDeviceType('desktop');
  }, [setDeviceType]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(ScreenHeader, {
      title: __('Browse styles'),
      description: __('Choose a variation to change the look of the site.')
    }), /*#__PURE__*/_jsx(Card, {
      size: "small",
      isBorderless: true,
      className: "edit-site-global-styles-screen-style-variations",
      children: /*#__PURE__*/_jsx(CardBody, {
        children: /*#__PURE__*/_jsx(SidebarNavigationScreenGlobalStylesContent, {})
      })
    })]
  });
}
export default ScreenStyleVariations;
//# sourceMappingURL=screen-style-variations.js.map