// packages/components/src/toggle-group-control/toggle-group-control/component.tsx
import { useMemo, useState } from "@wordpress/element";
import { useMergeRefs } from "@wordpress/compose";
import { contextConnect, useContextSystem } from "../../context/index.js";
import { useCx } from "../../utils/hooks/index.js";
import BaseControl from "../../base-control/index.js";
import { VisualLabelWrapper } from "./styles.js";
import * as styles from "./styles.js";
import { ToggleGroupControlAsRadioGroup } from "./as-radio-group.js";
import { ToggleGroupControlAsButtonGroup } from "./as-button-group.js";
import { useTrackElementOffsetRect } from "../../utils/element-rect.js";
import { useAnimatedOffsetRect } from "../../utils/hooks/use-animated-offset-rect.js";
import { maybeWarnDeprecated36pxSize } from "../../utils/deprecated-36px-size.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UnconnectedToggleGroupControl(props, forwardedRef) {
  const {
    __nextHasNoMarginBottom: _,
    // Prevent passing this to the internal component
    __next40pxDefaultSize = false,
    __shouldNotWarnDeprecated36pxSize,
    className,
    isAdaptiveWidth = false,
    isBlock = false,
    isDeselectable = false,
    label,
    hideLabelFromVision = false,
    help,
    onChange,
    size = "default",
    value,
    children,
    ...otherProps
  } = useContextSystem(props, "ToggleGroupControl");
  const normalizedSize = __next40pxDefaultSize && size === "default" ? "__unstable-large" : size;
  const [selectedElement, setSelectedElement] = useState();
  const [controlElement, setControlElement] = useState();
  const refs = useMergeRefs([setControlElement, forwardedRef]);
  const selectedRect = useTrackElementOffsetRect(value !== null && value !== void 0 ? selectedElement : void 0);
  useAnimatedOffsetRect(controlElement, selectedRect, {
    prefix: "selected",
    dataAttribute: "indicator-animated",
    transitionEndFilter: (event) => event.pseudoElement === "::before",
    roundRect: true
  });
  const cx = useCx();
  const classes = useMemo(() => cx(styles.toggleGroupControl({
    isBlock,
    isDeselectable,
    size: normalizedSize
  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
  maybeWarnDeprecated36pxSize({
    componentName: "ToggleGroupControl",
    size,
    __next40pxDefaultSize,
    __shouldNotWarnDeprecated36pxSize
  });
  return /* @__PURE__ */ _jsxs(BaseControl, {
    help,
    children: [!hideLabelFromVision && /* @__PURE__ */ _jsx(VisualLabelWrapper, {
      children: /* @__PURE__ */ _jsx(BaseControl.VisualLabel, {
        children: label
      })
    }), /* @__PURE__ */ _jsx(MainControl, {
      ...otherProps,
      setSelectedElement,
      className: classes,
      isAdaptiveWidth,
      label,
      onChange,
      ref: refs,
      size: normalizedSize,
      value,
      children
    })]
  });
}
var ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, "ToggleGroupControl");
var component_default = ToggleGroupControl;
export {
  ToggleGroupControl,
  component_default as default
};
//# sourceMappingURL=component.js.map
