/* wp:polyfill */
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.getEditorCanvasContainerTitle = getEditorCanvasContainerTitle;
exports.useHasEditorCanvasContainer = useHasEditorCanvasContainer;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _keycodes = require("@wordpress/keycodes");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _preferences = require("@wordpress/preferences");
var _editor = require("@wordpress/editor");
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  EditorContentSlotFill,
  ResizableEditor
} = (0, _lockUnlock.unlock)(_editor.privateApis);

/**
 * Returns a translated string for the title of the editor canvas container.
 *
 * @param {string} view Editor canvas container view.
 *
 * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
 */
function getEditorCanvasContainerTitle(view) {
  switch (view) {
    case 'style-book':
      return (0, _i18n.__)('Style Book');
    case 'global-styles-revisions':
    case 'global-styles-revisions:style-book':
      return (0, _i18n.__)('Style Revisions');
    default:
      return '';
  }
}
function EditorCanvasContainer({
  children,
  closeButtonLabel,
  onClose,
  enableResizing = false
}) {
  const {
    editorCanvasContainerView,
    showListViewByDefault
  } = (0, _data.useSelect)(select => {
    const _editorCanvasContainerView = (0, _lockUnlock.unlock)(select(_store.store)).getEditorCanvasContainerView();
    const _showListViewByDefault = select(_preferences.store).get('core', 'showListViewByDefault');
    return {
      editorCanvasContainerView: _editorCanvasContainerView,
      showListViewByDefault: _showListViewByDefault
    };
  }, []);
  const [isClosed, setIsClosed] = (0, _element.useState)(false);
  const {
    setEditorCanvasContainerView
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const {
    setIsListViewOpened
  } = (0, _data.useDispatch)(_editor.store);
  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
  const sectionFocusReturnRef = (0, _compose.useFocusReturn)();
  function onCloseContainer() {
    setIsListViewOpened(showListViewByDefault);
    setEditorCanvasContainerView(undefined);
    setIsClosed(true);
    if (typeof onClose === 'function') {
      onClose();
    }
  }
  function closeOnEscape(event) {
    if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
      event.preventDefault();
      onCloseContainer();
    }
  }
  const childrenWithProps = Array.isArray(children) ? _element.Children.map(children, (child, index) => index === 0 ? (0, _element.cloneElement)(child, {
    ref: sectionFocusReturnRef
  }) : child) : (0, _element.cloneElement)(children, {
    ref: sectionFocusReturnRef
  });
  if (isClosed) {
    return null;
  }
  const title = getEditorCanvasContainerTitle(editorCanvasContainerView);
  const shouldShowCloseButton = onClose || closeButtonLabel;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditorContentSlotFill.Fill, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-editor-canvas-container",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableEditor, {
        enableResizing: enableResizing,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
          className: "edit-site-editor-canvas-container__section",
          ref: shouldShowCloseButton ? focusOnMountRef : null,
          onKeyDown: closeOnEscape,
          "aria-label": title,
          children: [shouldShowCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            size: "compact",
            className: "edit-site-editor-canvas-container__close-button",
            icon: _icons.closeSmall,
            label: closeButtonLabel || (0, _i18n.__)('Close'),
            onClick: onCloseContainer
          }), childrenWithProps]
        })
      })
    })
  });
}
function useHasEditorCanvasContainer() {
  const fills = (0, _components.__experimentalUseSlotFills)(EditorContentSlotFill.name);
  return !!fills?.length;
}
var _default = exports.default = EditorCanvasContainer;
//# sourceMappingURL=index.js.map