// packages/block-editor/src/components/list-view/appender.js
import { useInstanceId } from "@wordpress/compose";
import { speak } from "@wordpress/a11y";
import { useSelect } from "@wordpress/data";
import { forwardRef, useEffect } from "@wordpress/element";
import { __, sprintf } from "@wordpress/i18n";
import { store as blockEditorStore } from "../../store";
import useBlockDisplayTitle from "../block-title/use-block-display-title";
import { useListViewContext } from "./context";
import Inserter from "../inserter";
import AriaReferencedText from "./aria-referenced-text";
import { unlock } from "../../lock-unlock";
import { jsx, jsxs } from "react/jsx-runtime";
var Appender = forwardRef(
  ({ nestingLevel, blockCount, clientId, ...props }, ref) => {
    const { insertedBlock, setInsertedBlock } = useListViewContext();
    const instanceId = useInstanceId(Appender);
    const { directInsert, hideInserter } = useSelect(
      (select) => {
        const { getBlockListSettings, getTemplateLock, isZoomOut } = unlock(select(blockEditorStore));
        const settings = getBlockListSettings(clientId);
        const directInsertValue = settings?.directInsert || false;
        const hideInserterValue = !!getTemplateLock(clientId) || isZoomOut();
        return {
          directInsert: directInsertValue,
          hideInserter: hideInserterValue
        };
      },
      [clientId]
    );
    const blockTitle = useBlockDisplayTitle({
      clientId,
      context: "list-view"
    });
    const insertedBlockTitle = useBlockDisplayTitle({
      clientId: insertedBlock?.clientId,
      context: "list-view"
    });
    useEffect(() => {
      if (!insertedBlockTitle?.length) {
        return;
      }
      speak(
        sprintf(
          // translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
          __("%s block inserted"),
          insertedBlockTitle
        ),
        "assertive"
      );
    }, [insertedBlockTitle]);
    if (hideInserter) {
      return null;
    }
    const descriptionId = `list-view-appender__${instanceId}`;
    const description = sprintf(
      /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
      __("Append to %1$s block at position %2$d, Level %3$d"),
      blockTitle,
      blockCount + 1,
      nestingLevel
    );
    return /* @__PURE__ */ jsxs("div", { className: "list-view-appender", children: [
      /* @__PURE__ */ jsx(
        Inserter,
        {
          ref,
          rootClientId: clientId,
          position: "bottom right",
          isAppender: true,
          selectBlockOnInsert: false,
          shouldDirectInsert: directInsert,
          __experimentalIsQuick: true,
          ...props,
          toggleProps: { "aria-describedby": descriptionId },
          onSelectOrClose: (maybeInsertedBlock) => {
            if (maybeInsertedBlock?.clientId) {
              setInsertedBlock(maybeInsertedBlock);
            }
          }
        }
      ),
      /* @__PURE__ */ jsx(AriaReferencedText, { id: descriptionId, children: description })
    ] });
  }
);
export {
  Appender
};
//# sourceMappingURL=appender.js.map
