// packages/block-editor/src/components/block-toolbar/switch-section-style.js
import {
  ToolbarButton,
  ToolbarGroup,
  Icon as WCIcon,
  Path,
  SVG
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useDispatch, useSelect } from "@wordpress/data";
import useStylesForBlocks from "../block-styles/use-styles-for-block.mjs";
import { replaceActiveStyle } from "../block-styles/utils.mjs";
import { store as blockEditorStore } from "../../store/index.mjs";
import { globalStylesDataKey } from "../../store/private-keys.mjs";
import { getVariationStylesWithRefValues } from "../../hooks/block-style-variation.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var styleIcon = /* @__PURE__ */ jsxs(
  SVG,
  {
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    width: "24",
    height: "24",
    "aria-hidden": "true",
    focusable: "false",
    children: [
      /* @__PURE__ */ jsx(Path, { d: "M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z" }),
      /* @__PURE__ */ jsx(
        Path,
        {
          stroke: "currentColor",
          strokeWidth: "1.5",
          d: "M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
        }
      )
    ]
  }
);
function SwitchSectionStyle({ clientId }) {
  const { stylesToRender, activeStyle, className } = useStylesForBlocks({
    clientId
  });
  const { updateBlockAttributes } = useDispatch(blockEditorStore);
  const { globalSettings, globalStyles, blockName } = useSelect(
    (select) => {
      const settings = select(blockEditorStore).getSettings();
      return {
        globalSettings: settings.__experimentalFeatures,
        globalStyles: settings[globalStylesDataKey],
        blockName: select(blockEditorStore).getBlockName(clientId)
      };
    },
    [clientId]
  );
  const activeStyleBackground = activeStyle?.name ? getVariationStylesWithRefValues(
    {
      settings: globalSettings,
      styles: globalStyles
    },
    blockName,
    activeStyle.name
  )?.color?.background : void 0;
  if (!stylesToRender || stylesToRender.length === 0) {
    return null;
  }
  const handleStyleSwitch = () => {
    const currentIndex = stylesToRender.findIndex(
      (style) => style.name === activeStyle.name
    );
    const nextIndex = (currentIndex + 1) % stylesToRender.length;
    const nextStyle = stylesToRender[nextIndex];
    const styleClassName = replaceActiveStyle(
      className,
      activeStyle,
      nextStyle
    );
    updateBlockAttributes(clientId, {
      className: styleClassName
    });
  };
  return /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(
    ToolbarButton,
    {
      onClick: handleStyleSwitch,
      label: __("Shuffle styles"),
      children: /* @__PURE__ */ jsx(
        WCIcon,
        {
          icon: styleIcon,
          style: {
            fill: activeStyleBackground || "transparent"
          }
        }
      )
    }
  ) });
}
var switch_section_style_default = SwitchSectionStyle;
export {
  switch_section_style_default as default
};
//# sourceMappingURL=switch-section-style.mjs.map
