import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
/* empty css                        */
import ToggleButtonGroup from "../../node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup.js";
import ToggleButton$1 from "../../node_modules/@mui/material/ToggleButton/ToggleButton.js";
function ToggleButton({ selfProps, parentProps }) {
  const { icon, label, disabled: selfDisabled, onClick: _onClick, ...restSelf } = selfProps;
  const { selectedOption, isDisabled } = parentProps;
  const buttonClassName = useMemo(() => {
    let retVal = "ia-styles ia-buttonGroupButton";
    if (selfDisabled ?? isDisabled) {
      retVal += " ia-buttonGroupButton-disabled";
    }
    if (selfProps.value === selectedOption) {
      retVal += " ia-buttonGroupButton-selected";
    }
    if (icon) {
      retVal += " ia-buttonGroupButton-withIcon";
    }
    return retVal;
  }, [selfDisabled, isDisabled, selfProps.value, selectedOption, icon]);
  return /* @__PURE__ */ jsxs(ToggleButton$1, { disableRipple: true, className: buttonClassName, ...restSelf, children: [
    icon,
    label
  ] });
}
function ButtonGroup({
  options,
  selectedOption,
  isDisabled = false,
  onChange,
  className = "",
  ...args
}) {
  const groupClassName = useMemo(() => {
    let retVal = "ia-styles ia-buttonGroup";
    if (isDisabled) {
      retVal += " ia-buttonGroup-disabled";
    }
    return `${retVal} ${className}`.trim();
  }, [isDisabled, className]);
  return /* @__PURE__ */ jsx(
    ToggleButtonGroup,
    {
      ...args,
      exclusive: true,
      className: groupClassName,
      orientation: "horizontal",
      value: selectedOption,
      onChange: (_e, value) => onChange == null ? void 0 : onChange(_e, value),
      children: options.map((opt) => /* @__PURE__ */ jsx(
        ToggleButton,
        {
          parentProps: { isDisabled, selectedOption },
          selfProps: { ...opt }
        },
        opt.value
      ))
    }
  );
}
ButtonGroup.displayName = "ButtonGroup";
export {
  ButtonGroup
};
