import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { forwardRef, useEffect, useImperativeHandle, useState, } from 'react';
import { CloseIcon } from '../../../lib/icons/Close.js';
export const TextField = forwardRef(function TextField({ value, onChange, className, startAdornment, endAdornment, inputProps, disabled = false, size = 'small', clearable = false, onFocus, onBlur, onClick, hasError = false, helperText, type = 'text', }, ref) {
    const [inputEl, setInputEl] = useState(null);
    const valueIsEmpty = useValueIsEmpty(value, inputEl);
    const clearInput = () => {
        if (onChange != null) {
            onChange('');
            return;
        }
        if (inputEl != null) {
            inputEl.value = '';
        }
    };
    // Maintain a local ref, and still forward it along
    useImperativeHandle(ref, () => inputEl ?? undefined, [inputEl]);
    const endAdornmentVisible = endAdornment != null || clearable;
    return (_jsxs("div", { className: classNames('seam-text-field', className, `seam-${size}`, {
            'seam-disabled': disabled,
            'seam-error': hasError,
        }), children: [_jsxs("div", { className: 'seam-main', children: [startAdornment != null && (_jsx("div", { className: 'seam-adornment seam-start', children: startAdornment })), _jsx("input", { className: 'seam-text-field-input', value: value, onChange: onChange == null ? undefined : handleString(onChange), disabled: disabled, ref: setInputEl, onFocus: onFocus, onBlur: onBlur, onClick: onClick, type: type, ...inputProps }), endAdornmentVisible && (_jsxs("div", { className: 'seam-adornment seam-end', children: [clearable && (_jsx("button", { className: classNames({
                                    'seam-hidden': valueIsEmpty,
                                }), onClick: clearInput, children: _jsx(CloseIcon, {}) })), endAdornment] }))] }), helperText != null && (_jsx("div", { className: 'seam-helper-text', children: helperText }))] }));
});
export const handleString = (setter) => (event) => {
    setter(event.currentTarget.value);
};
function useValueIsEmpty(value, inputEl) {
    const [valueIsEmpty, setValueIsEmpty] = useState(true);
    // If this is a controlled element, we'll just look at `value`
    useEffect(() => {
        setValueIsEmpty(value == null || value === '');
    }, [value]);
    // If this is not a controlled element, we'll need to listen to `input`
    // events.
    useEffect(() => {
        if (inputEl == null) {
            return;
        }
        const handler = (event) => {
            if (value !== undefined) {
                return;
            }
            if (event.target == null || !('value' in event.target)) {
                return;
            }
            const inputValue = event.target.value;
            if (value === undefined) {
                setValueIsEmpty(inputValue === '');
            }
        };
        inputEl.addEventListener('input', handler);
        return () => {
            inputEl.removeEventListener('input', handler);
        };
    }, [inputEl, value]);
    return valueIsEmpty;
}
//# sourceMappingURL=TextField.js.map