'use client';
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import ReactSelect from '../../../elements/ReactSelect/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { fieldBaseClass } from '../shared.js';
export const TextInput = (props)=>{
    const { AfterInput, BeforeInput, Description, Error, Label, className, hasMany, inputRef, maxRows, onChange, onKeyDown, path, placeholder, readOnly, rtl, showError, style, value, valueToRender, width } = props;
    const { i18n, t } = useTranslation();
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            'text',
            className,
            showError && 'error',
            readOnly && 'read-only',
            hasMany && 'has-many'
        ].filter(Boolean).join(' '),
        style: {
            ...style,
            width
        }
    }, Error, Label, hasMany ? /*#__PURE__*/ React.createElement(ReactSelect, {
        className: `field-${path.replace(/\./g, '__')}`,
        disabled: readOnly,
        // prevent adding additional options if maxRows is reached
        filterOption: ()=>!maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows),
        isClearable: true,
        isCreatable: true,
        isMulti: true,
        isSortable: true,
        noOptionsMessage: ()=>{
            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
            if (isOverHasMany) {
                return t('validation:limitReached', {
                    max: maxRows,
                    value: value.length + 1
                });
            }
            return null;
        },
        onChange: onChange,
        options: [],
        placeholder: t('general:enterAValue'),
        showError: showError,
        value: valueToRender
    }) : /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement("input", {
        "data-rtl": rtl,
        disabled: readOnly,
        id: `field-${path?.replace(/\./g, '__')}`,
        name: path,
        onChange: onChange,
        onKeyDown: onKeyDown,
        placeholder: getTranslation(placeholder, i18n),
        ref: inputRef,
        type: "text",
        value: value || ''
    }), AfterInput), Description);
};

//# sourceMappingURL=Input.js.map