import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useCallback } from 'react';
import { useConsolidatedRef, useI18n, useFocusWithin, useTestIds, useUID } from '../../hooks';
import { StyledRangeInputContainer } from '../Input/Input.styles';
import FormField from '../FormField';
import Flex from '../Flex';
import { withTestIds, createClassName } from '../../utils';
import HiddenText from '../HiddenText';
import NumberInput from './NumberInput';
import { getNumberRangeTestIds } from './Number.test-ids';
export default withTestIds(forwardRef(function NumberRangeInput({ name, testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, className, ...restProps }, ref) {
    const testIds = useTestIds(testId, getNumberRangeTestIds);
    const t = useI18n();
    const start = value.start ?? '';
    const end = value.end ?? '';
    const onFocusChange = useCallback((focused) => {
        (focused ? onFocus : onBlur)?.({ start, end });
    }, [onBlur, value.start, value.end]);
    const containerRef = useConsolidatedRef(ref);
    useFocusWithin([containerRef], onFocusChange);
    const commonProps = {
        status,
        placeholder,
        readOnly,
        required,
        unit,
        showDecimal,
        numberOfDecimals,
        showGroupSeparators,
        min,
        max,
        variant
    };
    const descriptionId = useUID();
    return (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, labelAs: 'legend', label: label, disabled: disabled, required: required, readOnly: readOnly, status: status, "aria-describedby": descriptionId, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, className: createClassName('number-range-input', className), children: [_jsx(NumberInput, { testId: testIds.min, ...commonProps, value: start, onChange: fromValue => onChange({ start: fromValue, end }), label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(NumberInput, { testId: testIds.max, ...commonProps, value: end, onChange: toValue => onChange({ start, end: toValue }), label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] }) }), _jsx(HiddenText, { id: descriptionId, children: t('range_input') })] }));
}), getNumberRangeTestIds);
//# sourceMappingURL=NumberRangeInput.js.map