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 { Loader } from '../../Loader';
import { CLEAR_TEXT } from './constants';
import { IconWrapper, StyledTagsList, StyledTextField } 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: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, } = useLogic({
        inputRef,
        value,
        onChange: propsOnChange,
        disabled,
        onClick,
        isLoading,
    });
    return (_jsx(StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: _jsxs(IconWrapper, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? (_jsx(Loader, { size: "small" })) : (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) }))] }) }));
});
