"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _blockEditor = require("@wordpress/block-editor");
var _iconWithCurrentColor = require("./icon-with-current-color");
var _navigationButton = require("./navigation-button");
var _rootMenu = _interopRequireDefault(require("./root-menu"));
var _previewStyles = _interopRequireDefault(require("./preview-styles"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ScreenRoot() {
  const [customCSS] = useGlobalStyle('css');
  const {
    hasVariations,
    canEditCSS
  } = (0, _data.useSelect)(select => {
    const {
      getEntityRecord,
      __experimentalGetCurrentGlobalStylesId,
      __experimentalGetCurrentThemeGlobalStylesVariations
    } = select(_coreData.store);
    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
    return {
      hasVariations: !!__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
      canEditCSS: !!globalStyles?._links?.['wp:action-edit-css']
    };
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
    size: "small",
    className: "edit-site-global-styles-screen-root",
    isRounded: false,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: 4,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
          className: "edit-site-global-styles-screen-root__active-style-tile",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardMedia, {
            className: "edit-site-global-styles-screen-root__active-style-tile-preview",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewStyles.default, {})
          })
        }), hasVariations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
            path: "/variations",
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
              justify: "space-between",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
                children: (0, _i18n.__)('Browse styles')
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconWithCurrentColor.IconWithCurrentColor, {
                icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
              })]
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_rootMenu.default, {})]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardDivider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardBody, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
        as: "p",
        paddingTop: 2
        /*
         * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
         * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
         * the nav button inset should be looked at before reusing further.
         */,
        paddingX: "13px",
        marginBottom: 4,
        children: (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
          path: "/blocks",
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
            justify: "space-between",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
              children: (0, _i18n.__)('Blocks')
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconWithCurrentColor.IconWithCurrentColor, {
              icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
            })]
          })
        })
      })]
    }), canEditCSS && !!customCSS && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardDivider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardBody, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
          as: "p",
          paddingTop: 2,
          paddingX: "13px",
          marginBottom: 4,
          children: (0, _i18n.__)('Add your own CSS to customize the appearance and layout of your site.')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
            path: "/css",
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
              justify: "space-between",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
                children: (0, _i18n.__)('Additional CSS')
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconWithCurrentColor.IconWithCurrentColor, {
                icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
              })]
            })
          })
        })]
      })]
    })]
  });
}
var _default = exports.default = ScreenRoot;
//# sourceMappingURL=screen-root.js.map