// packages/block-editor/src/components/inserter-list-item/index.js
import clsx from "clsx";
import { useMemo, useRef, memo } from "@wordpress/element";
import {
  createBlock,
  createBlocksFromInnerBlocksTemplate,
  isReusableBlock,
  isTemplatePart
} from "@wordpress/blocks";
import { __experimentalTruncate as Truncate } from "@wordpress/components";
import { ENTER, isAppleOS } from "@wordpress/keycodes";
import BlockIcon from "../block-icon";
import { InserterListboxItem } from "../inserter-listbox";
import InserterDraggableBlocks from "../inserter-draggable-blocks";
import { jsx, jsxs } from "react/jsx-runtime";
function InserterListItem({
  className,
  isFirst,
  item,
  onSelect,
  onHover,
  isDraggable,
  ...props
}) {
  const isDraggingRef = useRef(false);
  const itemIconStyle = item.icon ? {
    backgroundColor: item.icon.background,
    color: item.icon.foreground
  } : {};
  const blocks = useMemo(
    () => [
      createBlock(
        item.name,
        item.initialAttributes,
        createBlocksFromInnerBlocksTemplate(item.innerBlocks)
      )
    ],
    [item.name, item.initialAttributes, item.innerBlocks]
  );
  const isSynced = isReusableBlock(item) && item.syncStatus !== "unsynced" || isTemplatePart(item);
  return /* @__PURE__ */ jsx(
    InserterDraggableBlocks,
    {
      isEnabled: isDraggable && !item.isDisabled,
      blocks,
      icon: item.icon,
      children: ({ draggable, onDragStart, onDragEnd }) => /* @__PURE__ */ jsx(
        "div",
        {
          className: clsx(
            "block-editor-block-types-list__list-item",
            {
              "is-synced": isSynced
            }
          ),
          draggable,
          onDragStart: (event) => {
            isDraggingRef.current = true;
            if (onDragStart) {
              onHover(null);
              onDragStart(event);
            }
          },
          onDragEnd: (event) => {
            isDraggingRef.current = false;
            if (onDragEnd) {
              onDragEnd(event);
            }
          },
          children: /* @__PURE__ */ jsxs(
            InserterListboxItem,
            {
              isFirst,
              className: clsx(
                "block-editor-block-types-list__item",
                className
              ),
              disabled: item.isDisabled,
              onClick: (event) => {
                event.preventDefault();
                onSelect(
                  item,
                  isAppleOS() ? event.metaKey : event.ctrlKey
                );
                onHover(null);
              },
              onKeyDown: (event) => {
                const { keyCode } = event;
                if (keyCode === ENTER) {
                  event.preventDefault();
                  onSelect(
                    item,
                    isAppleOS() ? event.metaKey : event.ctrlKey
                  );
                  onHover(null);
                }
              },
              onMouseEnter: () => {
                if (isDraggingRef.current) {
                  return;
                }
                onHover(item);
              },
              onMouseLeave: () => onHover(null),
              ...props,
              children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: "block-editor-block-types-list__item-icon",
                    style: itemIconStyle,
                    children: /* @__PURE__ */ jsx(BlockIcon, { icon: item.icon, showColors: true })
                  }
                ),
                /* @__PURE__ */ jsx("span", { className: "block-editor-block-types-list__item-title", children: /* @__PURE__ */ jsx(Truncate, { numberOfLines: 3, children: item.title }) })
              ]
            }
          )
        }
      )
    }
  );
}
var inserter_list_item_default = memo(InserterListItem);
export {
  inserter_list_item_default as default
};
//# sourceMappingURL=index.js.map
