"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CrossOutlineMd_1 = require("../../../icons/CrossOutlineMd");
const DownOutlineMd_1 = require("../../../icons/DownOutlineMd");
const IconButton_1 = require("../../IconButton");
const constants_1 = require("./constants");
const styles_1 = require("./styles");
const useLogic_1 = require("./useLogic");
const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, onClick: onClick, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }));
exports.Input = (0, react_1.forwardRef)((props, forwardedRef) => {
    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = (0, useLogic_1.useLogic)(props);
    const { value, valueToRender, disabled, isLoading, onChange, onClick, ...restProps } = props;
    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
});
