import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { StyledTextField } from "../Components/TextField";
import { PropertyEditorTextList } from "../PropertyEditing/PropertyEditorTextList";
export { DisplayModeValueEditor as DisplayModeStringValueEditor } from "./DisplayModeRender";
export const EditModeStringValueEditor = React.forwardRef(({ value, forData, onUpdate }, ref) => {
    const validValues = forData.validValues;
    const field = {
        value: forData.list
            ? Array.isArray(value) && typeof value !== "string"
                ? value
                : value
                    ? [value]
                    : []
            : Array.isArray(value) && typeof value !== "string"
                ? value[0]
                : value,
    };
    const [values, setValues] = useState(field.value);
    const onValueUpdate = () => {
        if (forData.list) {
            setValues([...field.value]);
            onUpdate([...field.value]);
        }
        else {
            setValues(field.value);
            onUpdate(field.value);
        }
    };
    useEffect(() => {
        const getInitialValue = () => {
            return {
                value: forData.list
                    ? Array.isArray(value) && typeof value !== "string"
                        ? value
                        : value
                            ? [value]
                            : []
                    : Array.isArray(value) && typeof value !== "string"
                        ? value[0]
                        : value,
            };
        };
        setValues(getInitialValue().value);
    }, [value, forData, setValues]);
    if (forData.list) {
        return (_jsx(PropertyEditorTextList, { editObject: field, propertyName: "value", updateCallback: onValueUpdate, validValues: validValues }, void 0));
    }
    return (_jsx(_Fragment, { children: validValues && validValues.length > 0 ? (_jsx(StyledTextField, Object.assign({ value: value || "", onChange: (event) => {
                setValues(event.target.value);
                onUpdate(event.target.value);
            }, select: true, SelectProps: {
                native: true,
            }, inputProps: {
                ref,
            }, "data-testid": "ValueEditor-Edit-text-withvalids", variant: "outlined", size: "small" }, { children: validValues.map((valid, idx) => (_jsx("option", Object.assign({ value: valid }, { children: valid }), `${valid}-${idx}`))) }), void 0)) : (_jsx(StyledTextField, { variant: "outlined", size: "small", value: values, onChange: (event) => {
                setValues(event.target.value);
            }, inputRef: ref, "data-testid": "ValueEditor-Edit-text", inputProps: {
                pattern: forData.pattern,
            }, onBlur: () => {
                onUpdate(values);
            }, placeholder: forData.name, onKeyDown: (event) => {
                if (event.key === "Enter") {
                    onUpdate(values);
                }
            } }, void 0)) }, void 0));
});
//# sourceMappingURL=String.js.map