"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InternalAdaptableNumberEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("../../../components/icons");
const useProperty_1 = tslib_1.__importDefault(require("../../../components/utils/useProperty"));
const fillStyle = {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
};
const hostStyle = {
    ...fillStyle,
    boxSizing: 'border-box',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
};
const inputStyle = {
    position: 'relative',
    background: 'transparent',
    boxSizing: 'border-box',
    minWidth: 0,
    outline: 'none',
    width: '100%',
    border: 'none',
};
const disallowedChars = new Set(['e', 'E']);
const preventDisallowedChars = (e) => {
    // prevent the user from entering the 'e' character - issue #2839
    if (disallowedChars.has(e.key)) {
        e.preventDefault();
    }
};
exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdaptableNumberEditorFn(props, ref) {
    const inputRef = React.useRef(null);
    const focus = () => {
        inputRef.current?.focus();
    };
    const [value, setValue] = (0, useProperty_1.default)(props, 'value', props.defaultValue, {
        onChange: (value) => {
            if (value !== '' && value == Number(value)) {
                value = Number(value);
            }
            props.onValueChange?.(value);
        },
    });
    React.useEffect(() => {
        // When the editor is opened by typing, the value is not set, even if the user
        // dismisses the editing by pressing enter or clicking outside, this forces the value to be set.
        setValue(props.defaultValue);
    }, []);
    React.useImperativeHandle(ref, () => {
        return {
            focus,
            setValue,
        };
    });
    const showClear = props.showClearButton && props.emptyValue != null && value != props.emptyValue;
    return (React.createElement("div", { style: hostStyle, onKeyDown: (e) => {
            if (e.key === 'Tab' && showClear && document.activeElement === inputRef.current) {
                e.stopPropagation();
            }
        } },
        React.createElement("input", { "data-name": "AdaptableNumberEditorInput", type: props.type ?? 'number', value: value, onKeyDown: preventDisallowedChars, onChange: React.useCallback((event) => {
                setValue(event.target.value);
            }, []), style: inputStyle, ref: inputRef }),
        showClear ? (React.createElement("div", { style: {
                display: 'inline-block',
                marginRight: 'var(--ab-space-1)',
                marginLeft: 'var(--ab-space-1)',
            }, onClick: (e) => {
                if (props.emptyValue != null) {
                    setValue(props.emptyValue);
                    e.stopPropagation();
                    focus();
                }
            }, onKeyDown: (e) => {
                if (props.emptyValue != null && e.key === 'Enter') {
                    setValue(props.emptyValue);
                    e.stopPropagation();
                    focus();
                }
            } },
            React.createElement(icons_1.Icon, { size: 18, name: "close", tabIndex: 0 }))) : null));
});
