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 { CLEAR_TEXT } from './constants';
import { EndAdornmentWrapper, StyledLoader, StyledTagsList, StyledTextField, } from './styles';
import { useLogic } from './useLogic';
const ClearButton = ({ disabled, onClick }) => (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, onClick: onClick, children: _jsx(CrossOutlineMd, {}) }));
export const Input = forwardRef((props, forwardedRef) => {
    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = useLogic(props);
    const { value, valueToRender, disabled, isLoading, onChange, onClick, ...restProps } = props;
    return (_jsx(StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: _jsxs(EndAdornmentWrapper, { children: [isLoading && _jsx(StyledLoader, {}), isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
});
