// packages/block-editor/src/components/list-view/block-select-button.js
import clsx from "clsx";
import {
  __experimentalHStack as HStack,
  __experimentalTruncate as Truncate,
  privateApis as componentsPrivateApis
} from "@wordpress/components";
import { forwardRef } from "@wordpress/element";
import {
  Icon,
  lockSmall as lock,
  pinSmall,
  unseen,
  symbol
} from "@wordpress/icons";
import { SPACE, ENTER } from "@wordpress/keycodes";
import { useSelect } from "@wordpress/data";
import { hasBlockSupport } from "@wordpress/blocks";
import BlockIcon from "../block-icon";
import useBlockDisplayInformation from "../use-block-display-information";
import useBlockDisplayTitle from "../block-title/use-block-display-title";
import ListViewExpander from "./expander";
import { useBlockLock } from "../block-lock";
import useListViewImages from "./use-list-view-images";
import { store as blockEditorStore } from "../../store";
import { unlock } from "../../lock-unlock";
import { jsx, jsxs } from "react/jsx-runtime";
var { Badge } = unlock(componentsPrivateApis);
function ListViewBlockSelectButton({
  className,
  block: { clientId },
  onClick,
  onContextMenu,
  onMouseDown,
  onToggleExpanded,
  tabIndex,
  onFocus,
  onDragStart,
  onDragEnd,
  draggable,
  isExpanded,
  ariaDescribedBy
}, ref) {
  const blockInformation = useBlockDisplayInformation(clientId);
  const blockTitle = useBlockDisplayTitle({
    clientId,
    context: "list-view"
  });
  const { isLocked } = useBlockLock(clientId);
  const { canToggleBlockVisibility, isBlockHidden, hasPatternName } = useSelect(
    (select) => {
      const { getBlockName, getBlockAttributes } = select(blockEditorStore);
      const { isBlockHidden: _isBlockHidden } = unlock(
        select(blockEditorStore)
      );
      const blockAttributes = getBlockAttributes(clientId);
      return {
        canToggleBlockVisibility: hasBlockSupport(
          getBlockName(clientId),
          "visibility",
          true
        ),
        isBlockHidden: _isBlockHidden(clientId),
        hasPatternName: !!blockAttributes?.metadata?.patternName
      };
    },
    [clientId]
  );
  const shouldShowLockIcon = isLocked;
  const shouldShowBlockVisibilityIcon = canToggleBlockVisibility && isBlockHidden;
  const isSticky = blockInformation?.positionType === "sticky";
  const images = useListViewImages({ clientId, isExpanded });
  const onDragStartHandler = (event) => {
    event.dataTransfer.clearData();
    onDragStart?.(event);
  };
  function onKeyDown(event) {
    if (event.keyCode === ENTER || event.keyCode === SPACE) {
      onClick(event);
    }
  }
  return /* @__PURE__ */ jsxs(
    "a",
    {
      className: clsx(
        "block-editor-list-view-block-select-button",
        className
      ),
      onClick,
      onContextMenu,
      onKeyDown,
      onMouseDown,
      ref,
      tabIndex,
      onFocus,
      onDragStart: onDragStartHandler,
      onDragEnd,
      draggable,
      href: `#block-${clientId}`,
      "aria-describedby": ariaDescribedBy,
      "aria-expanded": isExpanded,
      children: [
        /* @__PURE__ */ jsx(ListViewExpander, { onClick: onToggleExpanded }),
        /* @__PURE__ */ jsx(
          BlockIcon,
          {
            icon: hasPatternName ? symbol : blockInformation?.icon,
            showColors: true,
            context: "list-view"
          }
        ),
        /* @__PURE__ */ jsxs(
          HStack,
          {
            alignment: "center",
            className: "block-editor-list-view-block-select-button__label-wrapper",
            justify: "flex-start",
            spacing: 1,
            children: [
              /* @__PURE__ */ jsx("span", { className: "block-editor-list-view-block-select-button__title", children: /* @__PURE__ */ jsx(Truncate, { ellipsizeMode: "auto", children: blockTitle }) }),
              blockInformation?.anchor && /* @__PURE__ */ jsx("span", { className: "block-editor-list-view-block-select-button__anchor-wrapper", children: /* @__PURE__ */ jsx(Badge, { className: "block-editor-list-view-block-select-button__anchor", children: blockInformation.anchor }) }),
              isSticky && /* @__PURE__ */ jsx("span", { className: "block-editor-list-view-block-select-button__sticky", children: /* @__PURE__ */ jsx(Icon, { icon: pinSmall }) }),
              images.length ? /* @__PURE__ */ jsx(
                "span",
                {
                  className: "block-editor-list-view-block-select-button__images",
                  "aria-hidden": true,
                  children: images.map((image, index) => /* @__PURE__ */ jsx(
                    "span",
                    {
                      className: "block-editor-list-view-block-select-button__image",
                      style: {
                        backgroundImage: `url(${image.url})`,
                        zIndex: images.length - index
                        // Ensure the first image is on top, and subsequent images are behind.
                      }
                    },
                    image.clientId
                  ))
                }
              ) : null,
              shouldShowBlockVisibilityIcon && /* @__PURE__ */ jsx("span", { className: "block-editor-list-view-block-select-button__block-visibility", children: /* @__PURE__ */ jsx(Icon, { icon: unseen }) }),
              shouldShowLockIcon && /* @__PURE__ */ jsx("span", { className: "block-editor-list-view-block-select-button__lock", children: /* @__PURE__ */ jsx(Icon, { icon: lock }) })
            ]
          }
        )
      ]
    }
  );
}
var block_select_button_default = forwardRef(ListViewBlockSelectButton);
export {
  block_select_button_default as default
};
//# sourceMappingURL=block-select-button.js.map
