import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useIntl } from "react-intl";
import { Input } from "@gooddata/sdk-ui-kit";
export function AlertThresholdInput({ id, value, onChange, onBlur, suffix, errorMessage, }) {
    const intl = useIntl();
    const hasError = !!errorMessage;
    const errorId = `${id}-error`;
    return (_jsxs("div", { children: [
            _jsx(Input, { id: id, className: "gd-edit-alert__value-input s-alert-value-input", isSmall: true, value: value, onChange: onChange, onBlur: onBlur, type: "number", suffix: suffix, hasError: hasError, accessibilityConfig: {
                    ariaDescribedBy: hasError ? errorId : undefined,
                    ariaInvalid: hasError,
                    suffixAriaLabel: suffix === "%"
                        ? intl.formatMessage({
                            id: "input.unit.percent",
                        })
                        : suffix,
                } }), errorMessage ? (_jsx("div", { id: errorId, className: "gd-threshold-field-error", children: errorMessage })) : null] }));
}
