import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import * as RadixRadioGroup from "@radix-ui/react-radio-group";
import * as React from "react";
import { useBindingState } from "../../form/hooks/useBindingState.js";
import { concat } from "../../utils/classNames.js";
import "../../utils/globals.js";
import "zod";
import { useDidUpdateEffect } from "../../hooks/useDidUpdateEffect.js";
import { getContentFromOption } from "../../types/options.js";
import { useArmstrongConfig } from "../config/config.context.js";
import { Label } from "../label/label.component.js";
import { ValidationErrors } from "../validationErrors/validationErrors.component.js";
import "./radioGroup.theme.css.js";
const RadioGroup = React.forwardRef(
  ({ bind, options, className, value, errorIcon, validationMode, validationErrorMessages, onChange, customIndicator, error, displaySize, label, labelClassName, required, disabled, scrollValidationErrorsIntoView, requiredIndicator, displayMode, validationErrorsClassName, labelId, autoValidate, ...nativeProps }, ref) => {
    const [boundValue, setBoundValue, bindConfig] = useBindingState(bind, {
      value,
      validationErrorMessages,
      validationErrorIcon: errorIcon,
      validationMode,
      onChange,
      autoValidate
    });
    const globals = useArmstrongConfig({
      validationMode: bindConfig.validationMode,
      requiredIndicator,
      scrollValidationErrorsIntoView,
      validationErrorIcon: bindConfig.validationErrorIcon,
      inputDisplaySize: displaySize,
      autoValidate: bindConfig.autoValidate
    });
    useDidUpdateEffect(() => {
      if (globals.autoValidate) {
        bindConfig.validate();
      }
      bindConfig.setTouched(true);
    }, [boundValue]);
    return jsxs(Fragment, { children: [label && jsx(Label, { id: labelId, className: concat("arm-radio-group-label", labelClassName), required, requiredIndicator: globals.requiredIndicator, displaySize: globals.inputDisplaySize, children: label }), jsx(RadixRadioGroup.Root, { className: concat("arm-radio-group", className), "data-error": error || !!(validationErrorMessages == null ? void 0 : validationErrorMessages.length), "data-disabled": disabled, "data-size": displaySize, "data-mode": displayMode, value: (boundValue == null ? void 0 : boundValue.toString()) ?? "undefined", onValueChange: (newValue) => setBoundValue(typeof boundValue === "number" && newValue !== null && newValue !== void 0 ? +newValue : newValue), disabled, ref, ...nativeProps, children: options.map((option, i) => {
      var _a, _b, _c;
      const isChecked = boundValue === option.id;
      const labelContent = getContentFromOption(option, isChecked);
      return jsxs("div", { className: "arm-radio-group-item-container", children: [jsx(RadixRadioGroup.Item, { ...option.htmlProps ?? {}, className: "arm-radio-group-item", value: ((_a = option.id) == null ? void 0 : _a.toString()) ?? "", id: (_b = option.id) == null ? void 0 : _b.toString(), disabled: option.disabled, "data-checked": isChecked, "data-index": i, children: displayMode === "radio" ? jsx(RadixRadioGroup.Indicator, { className: "arm-radio-group-item-indicator", "data-custom-icon": !!customIndicator, children: isChecked && customIndicator }) : labelContent }), displayMode === "radio" && jsx("label", { className: "arm-radio-label", htmlFor: (_c = option.id) == null ? void 0 : _c.toString(), children: labelContent })] }, option.id);
    }) }), bindConfig.shouldShowValidationErrorMessage && !!bindConfig.validationErrorMessages.length && jsx(ValidationErrors, { validationErrors: bindConfig.validationErrorMessages, className: concat("arm-radio-errors", validationErrorsClassName) })] });
  }
  // type assertion to ensure generic works with RefForwarded component
  // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef
);
RadioGroup.defaultProps = {
  displayMode: "radio"
};
RadioGroup.displayName = "RadioGroup";
export {
  RadioGroup
};
//# sourceMappingURL=radioGroup.component.js.map
