import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';
import FormField from '../FormField';
import { StyledFormControl } from '../FormControl';
import { hasProp, withTestIds } from '../../utils';
import { useI18n, useTestIds, useUID } from '../../hooks';
import Text from '../Text';
import StyledTextArea, { AutoResizeWrapper } from './TextArea.styles';
import { getTextAreaTestIds } from './TextArea.test-ids';
const TextArea = forwardRef(function TextArea(props, ref) {
    const uid = useUID();
    const { testId, additionalInfo, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, labelHidden, info, status, resizable = false, autoResize = true, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
    const t = useI18n();
    const testIds = useTestIds(testId, getTextAreaTestIds);
    const autoResizeRef = useRef(null);
    const [charCount, setCharCount] = useState(0);
    const controlProp = {};
    // Sets the content for the hidden pseudo element that calculates the height of the textarea
    const updateAutoResizeEl = (content) => {
        if (autoResize && autoResizeRef.current) {
            autoResizeRef.current.dataset.textareaContent = content ?? '';
        }
    };
    useEffect(() => {
        if ('value' in props) {
            setCharCount(props.value ? props.value.length : 0);
            updateAutoResizeEl(props.value);
        }
        else if ('defaultValue' in props) {
            setCharCount(props.defaultValue ? props.defaultValue.length : 0);
            updateAutoResizeEl(props.defaultValue);
        }
    }, [props]);
    // Conditionally render component as controlled/uncontrolled
    if (hasProp(props, 'value')) {
        controlProp.value = value ?? '';
    }
    else if (hasProp(props, 'defaultValue')) {
        controlProp.defaultValue = defaultValue ?? '';
    }
    const onChange = useCallback((e) => {
        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {
            onChangeProp?.(e);
            setCharCount(e.target.value.length);
            updateAutoResizeEl(e.target.value);
        }
    }, [onChangeProp, hardStop, maxLength]);
    const TextAreaControl = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: ref, id: id, required: required, disabled: disabled, status: status, readOnly: readOnly, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, as: StyledTextArea }));
    const Comp = autoResize ? (_jsx(AutoResizeWrapper, { ref: autoResizeRef, children: TextAreaControl })) : (_jsx("div", { children: TextAreaControl }));
    return label || displayCharCount ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, readOnly: readOnly, info: info, status: status, charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { readOnly: readOnly, variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
});
export default withTestIds(TextArea, getTextAreaTestIds);
//# sourceMappingURL=TextArea.js.map