import { jsx, jsxs } from "react/jsx-runtime";
import { Children, cloneElement, useState } from "@wordpress/element";
import {
  Button,
  __experimentalUseSlotFills as useSlotFills
} from "@wordpress/components";
import { ESCAPE } from "@wordpress/keycodes";
import { __ } from "@wordpress/i18n";
import { useDispatch, useSelect } from "@wordpress/data";
import { closeSmall } from "@wordpress/icons";
import { useFocusOnMount, useFocusReturn } from "@wordpress/compose";
import { store as preferencesStore } from "@wordpress/preferences";
import {
  store as editorStore,
  privateApis as editorPrivateApis
} from "@wordpress/editor";
import { unlock } from "../../lock-unlock";
import { store as editSiteStore } from "../../store";
const { EditorContentSlotFill, ResizableEditor } = unlock(editorPrivateApis);
function getEditorCanvasContainerTitle(view) {
  switch (view) {
    case "style-book":
      return __("Style Book");
    case "global-styles-revisions":
    case "global-styles-revisions:style-book":
      return __("Style Revisions");
    default:
      return "";
  }
}
function EditorCanvasContainer({
  children,
  closeButtonLabel,
  onClose,
  enableResizing = false
}) {
  const { editorCanvasContainerView, showListViewByDefault } = useSelect(
    (select) => {
      const _editorCanvasContainerView = unlock(
        select(editSiteStore)
      ).getEditorCanvasContainerView();
      const _showListViewByDefault = select(preferencesStore).get(
        "core",
        "showListViewByDefault"
      );
      return {
        editorCanvasContainerView: _editorCanvasContainerView,
        showListViewByDefault: _showListViewByDefault
      };
    },
    []
  );
  const [isClosed, setIsClosed] = useState(false);
  const { setEditorCanvasContainerView } = unlock(
    useDispatch(editSiteStore)
  );
  const { setIsListViewOpened } = useDispatch(editorStore);
  const focusOnMountRef = useFocusOnMount("firstElement");
  const sectionFocusReturnRef = useFocusReturn();
  function onCloseContainer() {
    setIsListViewOpened(showListViewByDefault);
    setEditorCanvasContainerView(void 0);
    setIsClosed(true);
    if (typeof onClose === "function") {
      onClose();
    }
  }
  function closeOnEscape(event) {
    if (event.keyCode === ESCAPE && !event.defaultPrevented) {
      event.preventDefault();
      onCloseContainer();
    }
  }
  const childrenWithProps = Array.isArray(children) ? Children.map(
    children,
    (child, index) => index === 0 ? cloneElement(child, {
      ref: sectionFocusReturnRef
    }) : child
  ) : cloneElement(children, {
    ref: sectionFocusReturnRef
  });
  if (isClosed) {
    return null;
  }
  const title = getEditorCanvasContainerTitle(editorCanvasContainerView);
  const shouldShowCloseButton = onClose || closeButtonLabel;
  return /* @__PURE__ */ jsx(EditorContentSlotFill.Fill, { children: /* @__PURE__ */ jsx("div", { className: "edit-site-editor-canvas-container", children: /* @__PURE__ */ jsx(ResizableEditor, { enableResizing, children: /* @__PURE__ */ jsxs(
    "section",
    {
      className: "edit-site-editor-canvas-container__section",
      ref: shouldShowCloseButton ? focusOnMountRef : null,
      onKeyDown: closeOnEscape,
      "aria-label": title,
      children: [
        shouldShowCloseButton && /* @__PURE__ */ jsx(
          Button,
          {
            size: "compact",
            className: "edit-site-editor-canvas-container__close-button",
            icon: closeSmall,
            label: closeButtonLabel || __("Close"),
            onClick: onCloseContainer
          }
        ),
        childrenWithProps
      ]
    }
  ) }) }) });
}
function useHasEditorCanvasContainer() {
  const fills = useSlotFills(EditorContentSlotFill.name);
  return !!fills?.length;
}
var editor_canvas_container_default = EditorCanvasContainer;
export {
  editor_canvas_container_default as default,
  getEditorCanvasContainerTitle,
  useHasEditorCanvasContainer
};
//# sourceMappingURL=index.js.map
