'use client';

import * as React from 'react';
import { contains } from '@floating-ui/react/utils';
import { mergeProps } from '../merge-props/index.js';
import { useControlled } from '../utils/useControlled.js';
import { useFieldRootContext } from '../field/root/FieldRootContext.js';
import { useBaseUiId } from '../utils/useBaseUiId.js';
import { useFieldControlValidation } from '../field/control/useFieldControlValidation.js';
import { useField } from '../field/useField.js';
import { visuallyHidden } from '../utils/index.js';
export function useRadioGroup(params) {
  const {
    disabled = false,
    required,
    name: nameProp,
    defaultValue,
    readOnly,
    value: externalValue
  } = params;
  const {
    labelId,
    setTouched: setFieldTouched,
    setFocused,
    validationMode,
    name: fieldName
  } = useFieldRootContext();
  const name = fieldName ?? nameProp;
  const fieldControlValidation = useFieldControlValidation();
  const id = useBaseUiId();
  const [checkedValue, setCheckedValue] = useControlled({
    controlled: externalValue,
    default: defaultValue,
    name: 'RadioGroup',
    state: 'value'
  });
  useField({
    id,
    commitValidation: fieldControlValidation.commitValidation,
    value: checkedValue,
    controlRef: fieldControlValidation.inputRef
  });
  const [touched, setTouched] = React.useState(false);
  const getRootProps = React.useCallback((externalProps = {}) => mergeProps({
    role: 'radiogroup',
    'aria-disabled': disabled || undefined,
    'aria-readonly': readOnly || undefined,
    'aria-labelledby': labelId,
    onFocus() {
      setFocused(true);
    },
    onBlur(event) {
      if (!contains(event.currentTarget, event.relatedTarget)) {
        setFieldTouched(true);
        setFocused(false);
        if (validationMode === 'onBlur') {
          fieldControlValidation.commitValidation(checkedValue);
        }
      }
    },
    onKeyDownCapture(event) {
      if (event.key.startsWith('Arrow')) {
        setFieldTouched(true);
        setTouched(true);
        setFocused(true);
      }
    }
  }, fieldControlValidation.getValidationProps(externalProps)), [fieldControlValidation, disabled, readOnly, labelId, setFocused, setFieldTouched, validationMode, checkedValue]);
  const serializedCheckedValue = React.useMemo(() => {
    if (checkedValue == null) {
      return ''; // avoid uncontrolled -> controlled error
    }
    if (typeof checkedValue === 'string') {
      return checkedValue;
    }
    return JSON.stringify(checkedValue);
  }, [checkedValue]);
  const getInputProps = React.useCallback((externalProps = {}) => mergeProps({
    value: serializedCheckedValue,
    ref: fieldControlValidation.inputRef,
    id,
    name,
    disabled,
    readOnly,
    required,
    'aria-hidden': true,
    tabIndex: -1,
    style: visuallyHidden
  }, fieldControlValidation.getInputValidationProps(externalProps)), [fieldControlValidation, serializedCheckedValue, id, name, disabled, readOnly, required]);
  return React.useMemo(() => ({
    getRootProps,
    getInputProps,
    checkedValue,
    setCheckedValue,
    touched,
    setTouched,
    fieldControlValidation
  }), [getRootProps, getInputProps, checkedValue, setCheckedValue, touched, fieldControlValidation]);
}