"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var editor_canvas_container_exports = {};
__export(editor_canvas_container_exports, {
  default: () => editor_canvas_container_default,
  getEditorCanvasContainerTitle: () => getEditorCanvasContainerTitle,
  useHasEditorCanvasContainer: () => useHasEditorCanvasContainer
});
module.exports = __toCommonJS(editor_canvas_container_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_keycodes = require("@wordpress/keycodes");
var import_i18n = require("@wordpress/i18n");
var import_data = require("@wordpress/data");
var import_icons = require("@wordpress/icons");
var import_compose = require("@wordpress/compose");
var import_preferences = require("@wordpress/preferences");
var import_editor = require("@wordpress/editor");
var import_lock_unlock = require("../../lock-unlock");
var import_store = require("../../store");
const { EditorContentSlotFill, ResizableEditor } = (0, import_lock_unlock.unlock)(import_editor.privateApis);
function getEditorCanvasContainerTitle(view) {
  switch (view) {
    case "style-book":
      return (0, import_i18n.__)("Style Book");
    case "global-styles-revisions":
    case "global-styles-revisions:style-book":
      return (0, import_i18n.__)("Style Revisions");
    default:
      return "";
  }
}
function EditorCanvasContainer({
  children,
  closeButtonLabel,
  onClose,
  enableResizing = false
}) {
  const { editorCanvasContainerView, showListViewByDefault } = (0, import_data.useSelect)(
    (select) => {
      const _editorCanvasContainerView = (0, import_lock_unlock.unlock)(
        select(import_store.store)
      ).getEditorCanvasContainerView();
      const _showListViewByDefault = select(import_preferences.store).get(
        "core",
        "showListViewByDefault"
      );
      return {
        editorCanvasContainerView: _editorCanvasContainerView,
        showListViewByDefault: _showListViewByDefault
      };
    },
    []
  );
  const [isClosed, setIsClosed] = (0, import_element.useState)(false);
  const { setEditorCanvasContainerView } = (0, import_lock_unlock.unlock)(
    (0, import_data.useDispatch)(import_store.store)
  );
  const { setIsListViewOpened } = (0, import_data.useDispatch)(import_editor.store);
  const focusOnMountRef = (0, import_compose.useFocusOnMount)("firstElement");
  const sectionFocusReturnRef = (0, import_compose.useFocusReturn)();
  function onCloseContainer() {
    setIsListViewOpened(showListViewByDefault);
    setEditorCanvasContainerView(void 0);
    setIsClosed(true);
    if (typeof onClose === "function") {
      onClose();
    }
  }
  function closeOnEscape(event) {
    if (event.keyCode === import_keycodes.ESCAPE && !event.defaultPrevented) {
      event.preventDefault();
      onCloseContainer();
    }
  }
  const childrenWithProps = Array.isArray(children) ? import_element.Children.map(
    children,
    (child, index) => index === 0 ? (0, import_element.cloneElement)(child, {
      ref: sectionFocusReturnRef
    }) : child
  ) : (0, import_element.cloneElement)(children, {
    ref: sectionFocusReturnRef
  });
  if (isClosed) {
    return null;
  }
  const title = getEditorCanvasContainerTitle(editorCanvasContainerView);
  const shouldShowCloseButton = onClose || closeButtonLabel;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorContentSlotFill.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "edit-site-editor-canvas-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableEditor, { enableResizing, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "section",
    {
      className: "edit-site-editor-canvas-container__section",
      ref: shouldShowCloseButton ? focusOnMountRef : null,
      onKeyDown: closeOnEscape,
      "aria-label": title,
      children: [
        shouldShowCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Button,
          {
            size: "compact",
            className: "edit-site-editor-canvas-container__close-button",
            icon: import_icons.closeSmall,
            label: closeButtonLabel || (0, import_i18n.__)("Close"),
            onClick: onCloseContainer
          }
        ),
        childrenWithProps
      ]
    }
  ) }) }) });
}
function useHasEditorCanvasContainer() {
  const fills = (0, import_components.__experimentalUseSlotFills)(EditorContentSlotFill.name);
  return !!fills?.length;
}
var editor_canvas_container_default = EditorCanvasContainer;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  getEditorCanvasContainerTitle,
  useHasEditorCanvasContainer
});
//# sourceMappingURL=index.js.map
