import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { CrossOutlineMd } from '../../../icons/CrossOutlineMd';
import { DownOutlineMd } from '../../../icons/DownOutlineMd';
import { IconButton } from '../../IconButton';
import { TextField } from '../../TextField';
import { CLEAR_TEXT } from './constants';
import { IconWrapper } from './styles';
import { useLogic } from './useLogic';
const ClearButton = ({ disabled, onClick }) => (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, children: _jsx(CrossOutlineMd, {}) }));
export const Input = forwardRef(({ disabled, onChange, value, inputRef, hideHelperText = false, ...restProps }, forwardedRef) => {
    const { inputRef: internalInputRef, isVisibleClearButton, handleClearAll, } = useLogic({
        inputRef,
        value,
        onChange,
        disabled,
    });
    return (_jsx(TextField, { ...restProps, value: value, hideHelperText: hideHelperText, ref: forwardedRef, inputRef: internalInputRef, disabled: disabled, inputProps: { readOnly: true }, endAdornment: _jsxs(IconWrapper, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) })] }) }));
});
