// packages/editor/src/components/collab-sidebar/add-note.js
import { __ } from "@wordpress/i18n";
import { useSelect, useDispatch } from "@wordpress/data";
import {
  store as blockEditorStore,
  privateApis as blockEditorPrivateApis
} from "@wordpress/block-editor";
import { NoteCard } from "./note-card.mjs";
import { NoteForm } from "./note-form.mjs";
import { FloatingContainer } from "./floating-container.mjs";
import { focusNoteThread } from "./utils.mjs";
import { store as editorStore } from "../../store/index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { jsx } from "react/jsx-runtime";
var { useBlockElement } = unlock(blockEditorPrivateApis);
function AddNote({ onSubmit, sidebarRef, floating }) {
  const { clientId } = useSelect((select) => {
    const { getSelectedBlockClientId } = select(blockEditorStore);
    return {
      clientId: getSelectedBlockClientId()
    };
  }, []);
  const selectedNote = useSelect(
    (select) => unlock(select(editorStore)).getSelectedNote(),
    []
  );
  const blockElement = useBlockElement(clientId);
  const { toggleBlockSpotlight } = unlock(useDispatch(blockEditorStore));
  const { selectNote } = unlock(useDispatch(editorStore));
  const unselectNote = () => {
    selectNote(void 0);
    blockElement?.focus();
    toggleBlockSpotlight(clientId, false);
  };
  if (selectedNote !== "new" || !clientId) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    FloatingContainer,
    {
      floating,
      className: "editor-collab-sidebar-panel__thread is-selected",
      gap: "md",
      tabIndex: 0,
      "aria-label": __("New note"),
      role: "treeitem",
      style: floating ? { opacity: !floating.y ? 0 : void 0 } : void 0,
      onBlur: (event) => {
        if (!document.hasFocus()) {
          return;
        }
        if (event.currentTarget.contains(event.relatedTarget)) {
          return;
        }
        toggleBlockSpotlight(clientId, false);
        selectNote(void 0);
      },
      children: /* @__PURE__ */ jsx(NoteCard, { children: /* @__PURE__ */ jsx(
        NoteForm,
        {
          onSubmit: async (inputComment) => {
            const { id } = await onSubmit({
              content: inputComment
            });
            selectNote(id);
            focusNoteThread(id, sidebarRef.current);
          },
          onCancel: unselectNote,
          labels: { input: __("New note") }
        }
      ) })
    }
  );
}
export {
  AddNote
};
//# sourceMappingURL=add-note.mjs.map
