"use strict";

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

/**
 * Internal dependencies
 */

const {
  useGlobalStyle,
  AdvancedPanel: StylesAdvancedPanel
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ScreenCSS() {
  const description = (0, _i18n.__)('Add your own CSS to customize the appearance and layout of your site.');
  const [style] = useGlobalStyle('', undefined, 'user', {
    shouldDecodeEncode: false
  });
  const [inheritedStyle, setStyle] = useGlobalStyle('', undefined, 'all', {
    shouldDecodeEncode: false
  });
  const {
    setEditorCanvasContainerView
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: (0, _i18n.__)('CSS'),
      description: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [description, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
          href: (0, _i18n.__)('https://developer.wordpress.org/advanced-administration/wordpress/css/'),
          className: "edit-site-global-styles-screen-css-help-link",
          children: (0, _i18n.__)('Learn more about CSS')
        })]
      }),
      onBack: () => {
        setEditorCanvasContainerView(undefined);
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-global-styles-screen-css",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesAdvancedPanel, {
        value: style,
        onChange: setStyle,
        inheritedValue: inheritedStyle
      })
    })]
  });
}
var _default = exports.default = ScreenCSS;
//# sourceMappingURL=screen-css.js.map