import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../../scalars/lib/utils.js';
import { FormMessageList } from '../../../../scalars/components/fragments/form-message/index.js';
import { forwardRef, useId, useMemo } from 'react';
import { CharacterCounter } from '../../../../scalars/components/fragments/character-counter/index.js';
import { FormDescription } from '../../../../scalars/components/fragments/form-description/index.js';
import { FormGroup } from '../../../../scalars/components/fragments/form-group/index.js';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/index.js';
import ValueTransformer from '../../../../scalars/components/fragments/value-transformer/value-transformer.js';
import { sharedValueTransformers } from '../../../../scalars/lib/shared-value-transformers.js';
import { Input } from '../input/index.js';
import TextInputDiff from './text-input-diff.js';
const TextInput = forwardRef(({ label, description, value, defaultValue, onChange, errors, warnings, 
// TextProps
pattern, trim, uppercase, lowercase, maxLength, autoComplete, 
// Difference Props
baseValue, viewMode = 'edition', diffMode, ...props }, ref) => {
    const idGenerated = useId();
    const id = props.id ?? idGenerated;
    const autoCompleteValue = autoComplete === undefined ? undefined : autoComplete ? 'on' : 'off';
    const hasContentBelow = !!description || (Array.isArray(warnings) && warnings.length > 0) || (Array.isArray(errors) && errors.length > 0);
    const transformers = useMemo(() => [
        sharedValueTransformers.trimOnBlur(!!trim),
        sharedValueTransformers.lowercaseOnChange(!!lowercase),
        sharedValueTransformers.uppercaseOnChange(!!uppercase),
        sharedValueTransformers.trimOnEnter(!!trim),
    ], [trim, lowercase, uppercase]);
    if (viewMode === 'edition') {
        return (_jsxs(FormGroup, { children: [label && (_jsx(FormLabel, { htmlFor: id, required: props.required, disabled: props.disabled, hasError: !!errors?.length, children: label })), _jsx(ValueTransformer, { transformers: transformers, children: _jsx(Input, { id: id, value: value, defaultValue: defaultValue, onChange: onChange, pattern: pattern?.toString(), autoComplete: autoCompleteValue, ...props, ref: ref }) }), typeof maxLength === 'number' && maxLength > 0 && (_jsx("div", { className: cn('mt-[-6px] flex justify-end', hasContentBelow && '-mb-1'), children: _jsx(CharacterCounter, { maxLength: maxLength, value: value ?? '' }) })), description && _jsx(FormDescription, { children: description }), warnings && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
    }
    // Diff mode
    return (_jsx(TextInputDiff, { value: value ?? defaultValue ?? '', viewMode: viewMode, diffMode: diffMode, baseValue: baseValue, label: label, required: props.required }));
});
TextInput.displayName = 'TextInput';
export { TextInput };
//# sourceMappingURL=text-input.js.map