"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _editor = require("@wordpress/editor");
var _element = require("@wordpress/element");
var _header = _interopRequireDefault(require("./header"));
var _content = _interopRequireDefault(require("../sidebar-navigation-screen-global-styles/content"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useZoomOut
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
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 = (0, _data.useSelect)(select => {
    return select(_blockEditor.store).getSettings().isPreviewMode;
  }, []);
  const {
    setDeviceType
  } = (0, _data.useDispatch)(_editor.store);
  useZoomOut(!isPreviewMode);
  (0, _element.useEffect)(() => {
    setDeviceType('desktop');
  }, [setDeviceType]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: (0, _i18n.__)('Browse styles'),
      description: (0, _i18n.__)('Choose a variation to change the look of the site.')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
      size: "small",
      isBorderless: true,
      className: "edit-site-global-styles-screen-style-variations",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_content.default, {})
      })
    })]
  });
}
var _default = exports.default = ScreenStyleVariations;
//# sourceMappingURL=screen-style-variations.js.map