import * as React from 'react';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import FieldWrap from '../../../components/FieldWrap';
import SimpleButton from '../../../components/SimpleButton';
import Input from '../../../components/Input';
import { twMerge } from '../../../twMerge';
export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
    let closeButtonTooltip = props.value ? 'Clear' : null;
    const inputRef = React.useRef(null);
    const { focusOnClear = true } = props;
    return (React.createElement(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-defaultbackground twa:overflow-visible twa:w-full', props.className), style: props.style },
        React.createElement(Input, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
                inputRef.current = r;
                if (!ref) {
                    return;
                }
                if (typeof ref === 'function') {
                    ref(r);
                }
                else {
                    ref.current = r;
                }
            }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
        props.actionTools,
        React.createElement(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
                props.OnTextChange('');
                const input = inputRef.current;
                if (!focusOnClear) {
                    return;
                }
                requestAnimationFrame(() => {
                    if (input && input.focus) {
                        input.focus();
                    }
                });
            }, disabled: StringExtensions.IsNullOrEmpty(props.value.toString()) })));
});
