// packages/block-editor/src/components/block-styles/index.js
import clsx from "clsx";
import { useState } from "@wordpress/element";
import { debounce, useViewportMatch } from "@wordpress/compose";
import {
  Button,
  __experimentalTruncate as Truncate,
  Popover
} from "@wordpress/components";
import BlockStylesPreviewPanel from "./preview-panel";
import useStylesForBlocks from "./use-styles-for-block";
import { jsx, jsxs } from "react/jsx-runtime";
var noop = () => {
};
function BlockStyles({ clientId, onSwitch = noop, onHoverClassName = noop }) {
  const {
    onSelect,
    stylesToRender,
    activeStyle,
    genericPreviewBlock,
    className: previewClassName
  } = useStylesForBlocks({
    clientId,
    onSwitch
  });
  const [hoveredStyle, setHoveredStyle] = useState(null);
  const isMobileViewport = useViewportMatch("medium", "<");
  if (!stylesToRender || stylesToRender.length === 0) {
    return null;
  }
  const debouncedSetHoveredStyle = debounce(setHoveredStyle, 250);
  const onSelectStylePreview = (style) => {
    onSelect(style);
    onHoverClassName(null);
    setHoveredStyle(null);
    debouncedSetHoveredStyle.cancel();
  };
  const styleItemHandler = (item) => {
    if (hoveredStyle === item) {
      debouncedSetHoveredStyle.cancel();
      return;
    }
    debouncedSetHoveredStyle(item);
    onHoverClassName(item?.name ?? null);
  };
  return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-styles", children: [
    /* @__PURE__ */ jsx("div", { className: "block-editor-block-styles__variants", children: stylesToRender.map((style) => {
      const buttonText = style.label || style.name;
      return /* @__PURE__ */ jsx(
        Button,
        {
          __next40pxDefaultSize: true,
          className: clsx(
            "block-editor-block-styles__item",
            {
              "is-active": activeStyle.name === style.name
            }
          ),
          variant: "secondary",
          label: buttonText,
          onMouseEnter: () => styleItemHandler(style),
          onFocus: () => styleItemHandler(style),
          onMouseLeave: () => styleItemHandler(null),
          onBlur: () => styleItemHandler(null),
          onClick: () => onSelectStylePreview(style),
          "aria-current": activeStyle.name === style.name,
          children: /* @__PURE__ */ jsx(
            Truncate,
            {
              numberOfLines: 1,
              className: "block-editor-block-styles__item-text",
              children: buttonText
            }
          )
        },
        style.name
      );
    }) }),
    hoveredStyle && !isMobileViewport && /* @__PURE__ */ jsx(
      Popover,
      {
        placement: "left-start",
        offset: 34,
        focusOnMount: false,
        children: /* @__PURE__ */ jsx(
          "div",
          {
            className: "block-editor-block-styles__preview-panel",
            onMouseLeave: () => styleItemHandler(null),
            children: /* @__PURE__ */ jsx(
              BlockStylesPreviewPanel,
              {
                activeStyle,
                className: previewClassName,
                genericPreviewBlock,
                style: hoveredStyle
              }
            )
          }
        )
      }
    )
  ] });
}
var block_styles_default = BlockStyles;
export {
  block_styles_default as default
};
//# sourceMappingURL=index.js.map
