import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
// (C) 2019-2025 GoodData Corporation
import { useEffect, useRef, useState, } from "react";
import cx from "classnames";
import { cloneDeep, set } from "lodash-es";
import { FormattedMessage, useIntl } from "react-intl";
import { getTranslation } from "../../utils/translations.js";
import { DisabledBubbleMessage } from "../DisabledBubbleMessage.js";
const MAX_NUMBER_LENGTH = 15;
export function InputControl({ valuePath, properties, labelText, value: propValue = "", placeholder, type = "text", disabled = false, showDisabledMessage = false, disabledMessageId, hasWarning = false, disabledMessageAlignPoints, pushData = () => { }, maxLength, description, descriptionValues, validateFn, transformFn, }) {
    const intl = useIntl();
    const [value, setValue] = useState(propValue);
    const [lastSentValue, setLastSentValue] = useState(propValue);
    const inputRef = useRef(null);
    const justEmittedRef = useRef(false);
    useEffect(() => {
        setValue(propValue);
        setLastSentValue(propValue);
    }, [propValue]);
    const getInputClassNames = () => {
        return cx("gd-input-field", "gd-input-field-small", {
            "has-warning": hasWarning,
            number: type === "number",
        });
    };
    const isValid = (type, value) => {
        if (validateFn) {
            return validateFn(value);
        }
        if (type === "number") {
            // allow only numbers, `-` and string doesn't starts with `.`
            return !value.startsWith(".") && (!isNaN(Number(value)) || value === "-");
        }
        return true;
    };
    const onValueChanged = (event) => {
        const { value } = event.target;
        if (isValid(type, value)) {
            setValue(value);
        }
    };
    const triggerBlur = () => {
        if (inputRef.current) {
            inputRef.current.blur();
        }
    };
    const modifyDataForSending = (value) => {
        if (transformFn) {
            return transformFn(value);
        }
        if (type === "number") {
            return value.replace(/\.+$/, "");
        }
        return value;
    };
    const emitData = () => {
        const modifiedData = modifyDataForSending(value);
        const clonedProperties = cloneDeep(properties);
        set(clonedProperties, `controls.${valuePath}`, modifiedData);
        setValue(modifiedData);
        pushData?.({ properties: clonedProperties });
        justEmittedRef.current = true;
        return modifiedData;
    };
    const onBlur = () => {
        if (justEmittedRef.current) {
            justEmittedRef.current = false;
            return;
        }
        if (lastSentValue !== value) {
            const validatedData = emitData();
            setLastSentValue(validatedData);
        }
    };
    const onKeyPress = (event) => {
        if (event.key === "Enter") {
            if (lastSentValue !== value) {
                const validatedData = emitData();
                setLastSentValue(validatedData);
            }
            triggerBlur();
        }
    };
    return (_jsx(DisabledBubbleMessage, { showDisabledMessage: showDisabledMessage, messageId: disabledMessageId, alignPoints: disabledMessageAlignPoints, children: _jsxs(_Fragment, { children: [_jsxs("label", { className: "adi-bucket-inputfield s-adi-bucket-inputfield gd-input gd-input-small", children: [_jsx("span", { className: "input-label-text", children: getTranslation(labelText, intl) }), _jsx("input", { ref: inputRef, className: getInputClassNames(), value: value, placeholder: getTranslation(placeholder, intl), disabled: disabled, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onValueChanged, maxLength: type === "number" ? MAX_NUMBER_LENGTH : maxLength })] }), description ? (_jsx("div", { className: "adi-bucket-inputfield-description", children: _jsx(FormattedMessage, { id: description, values: descriptionValues }) })) : null] }) }));
}
//# sourceMappingURL=InputControl.js.map