import { __assign, __rest } from "tslib";
import React, { useRef, useEffect, useState, useContext } from 'react';
import classNames from 'classnames';
import { KeyCode } from '../_utils/enum';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { CloseCircle } from '../_utils/components';
var DEFAULT_MARGIN = 16;
var Input = React.forwardRef(function (props, ref) {
    var _a;
    var _b = props.size, size = _b === void 0 ? 'md' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.clearable, clearable = _d === void 0 ? false : _d, _e = props.defaultValue, defaultValue = _e === void 0 ? '' : _e, prefix = props.prefix, suffix = props.suffix, onChange = props.onChange, onEnterPress = props.onEnterPress, onKeyDown = props.onKeyDown, className = props.className, style = props.style, onClearClick = props.onClearClick, customisedCls = props.prefixCls, otherProps = __rest(props, ["size", "disabled", "clearable", "defaultValue", "prefix", "suffix", "onChange", "onEnterPress", "onKeyDown", "className", "style", "onClearClick", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('input', configContext.prefixCls, customisedCls);
    var inputSize = props.size || configContext.componentSize || size;
    var cls = classNames(prefixCls, className, prefixCls + "_" + inputSize, (_a = {},
        _a[prefixCls + "_disabled"] = disabled,
        _a));
    var prefixRef = useRef(null);
    var suffixRef = useRef(null);
    var _f = useState('value' in props ? props.value : defaultValue), value = _f[0], setValue = _f[1];
    var _g = useState({ paddingLeft: '7px', paddingRight: '7px' }), inputPadding = _g[0], setInputPadding = _g[1];
    var inputOnChange = function (e) {
        var val = e.currentTarget.value;
        !('value' in props) && setValue(val);
        onChange && onChange(e);
    };
    var inputOnKeydown = function (e) {
        if (e.keyCode === KeyCode.ENTER) {
            onEnterPress && onEnterPress(e);
        }
        onKeyDown && onKeyDown(e);
    };
    var clearBtnOnClick = function (e) {
        !('value' in props) && setValue('');
        onClearClick && onClearClick(e);
    };
    var renderClearButton = function () {
        if (clearable && value && value.length > 0) {
            return (React.createElement("span", { className: prefixCls + "__clear-btn", onClick: clearBtnOnClick },
                React.createElement(CloseCircle, { size: 16, color: "#BFBFBF" })));
        }
        return null;
    };
    useEffect(function () {
        var prefixNode = prefixRef.current;
        var suffixNode = suffixRef.current;
        var prefixWidth = prefixNode && prefixNode.offsetWidth;
        var suffixWidth = suffixNode && suffixNode.offsetWidth;
        var padding = __assign({}, inputPadding);
        if (prefixWidth) {
            padding.paddingLeft = prefixWidth + DEFAULT_MARGIN + 'px';
        }
        if (suffixWidth) {
            padding.paddingRight = suffixWidth + DEFAULT_MARGIN + 'px';
        }
        if (padding.paddingLeft !== inputPadding.paddingLeft ||
            padding.paddingRight !== inputPadding.paddingRight) {
            setInputPadding(padding);
        }
    }, [inputPadding]);
    useEffect(function () {
        'value' in props && setValue(props.value);
    }, [props]);
    return (React.createElement("div", { className: cls, style: style },
        prefix && (React.createElement("div", { ref: prefixRef, className: prefixCls + "__prefix" }, prefix)),
        React.createElement("input", __assign({}, otherProps, { ref: ref, value: value, disabled: disabled, className: prefixCls + "__input", style: { paddingLeft: inputPadding.paddingLeft, paddingRight: inputPadding.paddingRight }, onChange: inputOnChange, onKeyDown: inputOnKeydown })),
        (suffix || clearable) && (React.createElement("div", { ref: suffixRef, className: prefixCls + "__suffix" },
            renderClearButton(),
            suffix))));
});
Input.displayName = 'Input';
export default Input;
//# sourceMappingURL=input.js.map