import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import { useDebouncedCallback } from 'use-debounce';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import { Input as Input$1, InputLeftAddon, InputLeftElement, InputRightElement, InputRightAddon } from '@chakra-ui/react';
import InputWrapper from './InputWrapper.js';
import ClearButton from './ClearButton.js';

var renderIcon = function (Icon) {
    return Icon ? (React.createElement(InputLeftElement, { pointerEvents: "none" },
        React.createElement(Icon, null))) : null;
};
var renderEndElements = function (_a) {
    var isClearable = _a.isClearable, inputRef = _a.inputRef, endElement = _a.endElement;
    if (!isClearable && !endElement)
        return null;
    return (React.createElement(InputRightElement, { justifyContent: "flex-end" },
        React.createElement(React.Fragment, null,
            isClearable ? (React.createElement(ClearButton, { inputRef: inputRef, marginRight: endElement ? '4px' : '16px' })) : null,
            endElement)));
};
var renderLeftAddonElement = function (LeftAddonElement) {
    return LeftAddonElement ? React.createElement(InputLeftAddon, null, LeftAddonElement) : null;
};
var renderRightAddonElement = function (RightAddonElement) {
    return RightAddonElement ? (React.createElement(InputRightAddon, null, RightAddonElement)) : null;
};
var bindRefBeforeForwarding = function (_a) {
    var forwardedRef = _a.forwardedRef, localRef = _a.localRef;
    return function (node) {
        localRef.current = node;
        if (typeof forwardedRef === 'function') {
            forwardedRef(node);
        }
        else if (forwardedRef) {
            forwardedRef.current = node;
        }
    };
};
var Input = forwardRef(function (_a, ref) {
    var onChange = _a.onChange, value = _a.value, _b = _a.debounce, debounce = _b === void 0 ? false : _b, setInputValue = _a.setInputValue, _c = _a.type, type = _c === void 0 ? 'text' : _c, Icon = _a.icon, _d = _a.isClearable, isClearable = _d === void 0 ? false : _d, endElement = _a.endElement, RightAddonElement = _a.rightAddonElement, LeftAddonElement = _a.leftAddonElement, props = __rest(_a, ["onChange", "value", "debounce", "setInputValue", "type", "icon", "isClearable", "endElement", "rightAddonElement", "leftAddonElement"]);
    var inputRef = useRef(null);
    var _e = useState(value || ''), internalUIValue = _e[0], setInternalUIValue = _e[1];
    // https://lawsofux.com/doherty-threshold/
    var debounceThreshold = debounce ? 400 : 0;
    var inputValue = debounce ? internalUIValue : value;
    var setValueDebounced = useDebouncedCallback(function (newValue) {
        if (setInputValue)
            setInputValue(newValue);
    }, debounceThreshold);
    useEffect(function () {
        if (internalUIValue !== value && !setValueDebounced.isPending()) {
            setInternalUIValue(value || '');
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value]);
    var defaultOnChangeHandler = function (e) {
        onChange === null || onChange === void 0 ? void 0 : onChange(e);
        setInternalUIValue(e.target.value);
    };
    var debouncedOnChangeHandler = function (event) {
        var targetValue = event.target.value;
        setInternalUIValue(targetValue);
        setValueDebounced(targetValue);
    };
    var onChangeHandler = debounce
        ? debouncedOnChangeHandler
        : defaultOnChangeHandler;
    return (React.createElement(InputWrapper, { size: props.size, shouldWrap: Boolean(LeftAddonElement || RightAddonElement) },
        renderLeftAddonElement(LeftAddonElement),
        React.createElement(InputWrapper, { size: props.size, shouldWrap: !!Icon || isClearable || !!endElement },
            renderIcon(Icon),
            React.createElement(Input$1, __assign({}, props, { type: type, value: inputValue, onChange: onChangeHandler, ref: bindRefBeforeForwarding({
                    forwardedRef: ref,
                    localRef: inputRef,
                }), borderRightRadius: RightAddonElement ? '0' : 'sm', borderLeftRadius: LeftAddonElement ? '0' : 'sm' })),
            renderEndElements({
                isClearable: isClearable && !!internalUIValue,
                inputRef: inputRef,
                endElement: endElement,
            })),
        renderRightAddonElement(RightAddonElement)));
});
Input.displayName = 'Input';

export { Input as default };
//# sourceMappingURL=index.js.map
