'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { ReactSelect } from '../../elements/ReactSelect/index.js';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { FieldDescription } from '../../fields/FieldDescription/index.js';
import { FieldError } from '../../fields/FieldError/index.js';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { fieldBaseClass } from '../shared/index.js';
import './index.scss';
export const TextInput = (props)=>{
    const { AfterInput, BeforeInput, className, Description, description, Error, hasMany, htmlAttributes, inputRef, Label, label, localized, maxRows, onChange, onKeyDown, path, placeholder: placeholderFromProps, readOnly, required, rtl, showError, style, value, valueToRender } = props;
    const { i18n, t } = useTranslation();
    const editableProps = (data, className, selectProps)=>{
        const editableClassName = `${className}--editable`;
        return {
            onBlur: (event)=>{
                event.currentTarget.contentEditable = 'false';
            },
            onClick: (event)=>{
                event.currentTarget.contentEditable = 'true';
                event.currentTarget.classList.add(editableClassName);
                event.currentTarget.focus();
            },
            onKeyDown: (event)=>{
                if (!event.nativeEvent.isComposing && (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Escape')) {
                    event.currentTarget.contentEditable = 'false';
                    event.currentTarget.classList.remove(editableClassName);
                    data.value.value = event.currentTarget.innerText;
                    data.label = event.currentTarget.innerText;
                    if (data.value.value.replaceAll('\n', '')) {
                        selectProps.onChange(selectProps.value, {
                            action: 'create-option',
                            option: data
                        });
                    } else {
                        if (Array.isArray(selectProps.value)) {
                            const newValues = selectProps.value.filter((v)=>v.id !== data.id);
                            selectProps.onChange(newValues, {
                                action: 'pop-value',
                                removedValue: data
                            });
                        }
                    }
                    event.preventDefault();
                }
                event.stopPropagation();
            }
        };
    };
    const placeholder = getTranslation(placeholderFromProps, i18n);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            fieldBaseClass,
            'text',
            className,
            showError && 'error',
            readOnly && 'read-only',
            hasMany && 'has-many'
        ].filter(Boolean).join(' '),
        style: style,
        children: [
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    label: label,
                    localized: localized,
                    path: path,
                    required: required
                }, void 0, false, {
                    fileName: "src/fields/Text/Input.tsx",
                    lineNumber: 116,
                    columnNumber: 11
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Text/Input.tsx",
                lineNumber: 113,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${fieldBaseClass}__wrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Error,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
                            path: path,
                            showError: showError
                        }, void 0, false, {
                            fileName: "src/fields/Text/Input.tsx",
                            lineNumber: 122,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/Text/Input.tsx",
                        lineNumber: 120,
                        columnNumber: 9
                    }, this),
                    BeforeInput,
                    hasMany ? /*#__PURE__*/ _jsxDEV(ReactSelect, {
                        className: `field-${path.replace(/\./g, '__')}`,
                        components: {
                            DropdownIndicator: null
                        },
                        customProps: {
                            editableProps
                        },
                        disabled: readOnly,
                        // prevent adding additional options if maxRows is reached
                        filterOption: ()=>!maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows),
                        isClearable: false,
                        isCreatable: true,
                        isMulti: true,
                        isSortable: true,
                        menuIsOpen: false,
                        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: placeholder,
                        showError: showError,
                        value: valueToRender
                    }, void 0, false, {
                        fileName: "src/fields/Text/Input.tsx",
                        lineNumber: 126,
                        columnNumber: 11
                    }, this) : /*#__PURE__*/ _jsxDEV("input", {
                        "data-rtl": rtl,
                        disabled: readOnly,
                        id: `field-${path?.replace(/\./g, '__')}`,
                        name: path,
                        onChange: onChange,
                        onKeyDown: onKeyDown,
                        placeholder: placeholder,
                        ref: inputRef,
                        type: "text",
                        value: value || '',
                        ...htmlAttributes ?? {}
                    }, void 0, false, {
                        fileName: "src/fields/Text/Input.tsx",
                        lineNumber: 156,
                        columnNumber: 11
                    }, this),
                    AfterInput,
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Description,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                            description: description,
                            path: path
                        }, void 0, false, {
                            fileName: "src/fields/Text/Input.tsx",
                            lineNumber: 173,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/Text/Input.tsx",
                        lineNumber: 171,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Text/Input.tsx",
                lineNumber: 119,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Text/Input.tsx",
        lineNumber: 100,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=Input.js.map