'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { useTranslation } from '../../../../providers/Translation/index.js';
import { ReactSelect } from '../../../ReactSelect/index.js';
import './index.scss';
const baseClass = 'condition-value-text';
export const Text = (props)=>{
    const { disabled, field, onChange, operator, value } = props;
    const { t } = useTranslation();
    const hasMany = field?.hasMany ?? false;
    const isMulti = [
        'in',
        'not_in'
    ].includes(operator) || hasMany;
    const [valueToRender, setValueToRender] = React.useState([]);
    const onSelect = React.useCallback((selectedOption)=>{
        let newValue;
        if (!selectedOption) {
            newValue = [];
        } else if (isMulti) {
            if (Array.isArray(selectedOption)) {
                newValue = selectedOption.map((option)=>option.value?.value || option.value);
            } else {
                newValue = [
                    selectedOption.value?.value || selectedOption.value
                ];
            }
        }
        onChange(newValue);
    }, [
        isMulti,
        onChange
    ]);
    React.useEffect(()=>{
        if (Array.isArray(value)) {
            setValueToRender(value.map((val, index)=>{
                return {
                    id: `${val}${index}`,
                    // append index to avoid duplicate keys but allow duplicate numbers
                    label: `${val}`,
                    value: {
                        toString: ()=>`${val}${index}`,
                        value: val?.value || val
                    }
                };
            }));
        } else {
            setValueToRender([]);
        }
    }, [
        value
    ]);
    return isMulti ? /*#__PURE__*/ _jsxDEV(ReactSelect, {
        disabled: disabled,
        isClearable: true,
        isCreatable: true,
        isMulti: isMulti,
        isSortable: true,
        onChange: onSelect,
        options: [],
        placeholder: t('general:enterAValue'),
        value: valueToRender || []
    }, void 0, false, {
        fileName: "src/elements/WhereBuilder/Condition/Text/index.tsx",
        lineNumber: 61,
        columnNumber: 5
    }, this) : /*#__PURE__*/ _jsxDEV("input", {
        className: baseClass,
        disabled: disabled,
        onChange: (e)=>onChange(e.target.value),
        placeholder: t('general:enterAValue'),
        type: "text",
        value: value || ''
    }, void 0, false, {
        fileName: "src/elements/WhereBuilder/Condition/Text/index.tsx",
        lineNumber: 73,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map