import React, { forwardRef } from 'react';
import { StatusAlertSmall, StatusWarningSmall } from '@wix/wix-ui-icons-common';
import LabelledElement from '../LabelledElement/LabelledElement';
import Input from '../Input';
import Text from '../Text';
import { classes, st } from './InputWithLabel.st.css.js';
import { DATA_HOOKS } from './InputWithLabel.constants';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const getSuffixContainer = (suffix) => suffix.map((item, index) => {
    return (React.createElement("div", { "data-hook": "suffix-container", key: `suffix-container-${index}`, className: classes.groupIcon }, item));
});
const InputWithLabel = forwardRef(({ label, suffix, value, dataHook, status, statusMessage = '', onChange, onFocus, onBlur, name, type, ariaLabel, autoFocus, autocomplete, disabled, className, maxLength, placeholder, customInput, border, ...rest }, ref) => {
    const icons = useIcons('InputWithLabel', {
        StatusAlertSmall,
        StatusWarningSmall,
    });
    const isBottomLineBorder = border === 'bottomLine';
    const isWarning = status === Input.StatusWarning;
    const showStatusSection = (status === Input.StatusError || isWarning) && statusMessage;
    return (React.createElement("div", { "data-hook": dataHook, className: status ? undefined : classes.statusMessagePlaceholder },
        React.createElement(LabelledElement, { value: value, label: label, dataHook: DATA_HOOKS.labelledElement, topLabelGray: isBottomLineBorder, disabled: disabled }, ({ onChange: inputOnChange, onFocus: inputOnFocus, onBlur: inputOnBlur, className: inputClassName, getPlaceholder, ...restInputProps }) => (React.createElement(Input, { className: st(classes.root, inputClassName, className), ref: ref, name: name, type: type, ariaLabel: ariaLabel, autoFocus: autoFocus, autocomplete: autocomplete, disabled: disabled, maxLength: maxLength, placeholder: getPlaceholder(placeholder), onChange: e => {
                inputOnChange(e);
                onChange?.(e);
            }, onFocus: e => {
                inputOnFocus();
                onFocus?.(e);
            }, onBlur: e => {
                inputOnBlur();
                onBlur?.(e);
            }, dataHook: DATA_HOOKS.input, size: "large", value: value, suffix: suffix && getSuffixContainer(suffix), status: status, statusMessage: React.createElement("span", { style: { color: '#fff' } }, statusMessage), customInput: customInput, border: border, hideStatusSuffix: true, ...rest, ...restInputProps }))),
        showStatusSection && (React.createElement(Text, { skin: isWarning ? 'standard' : 'error', size: "small", weight: isWarning ? 'thin' : 'normal', className: classes.statusMessage },
            React.createElement("span", { className: st(classes.statusMessageIcon, { warning: isWarning }) }, isWarning ? (React.createElement(icons.StatusWarningSmall, null)) : (React.createElement(icons.StatusAlertSmall, null))),
            React.createElement("span", { "data-hook": DATA_HOOKS.errorMessage, className: classes.errorMessageContent }, statusMessage)))));
});
InputWithLabel.displayName = 'InputWithLabel';
export default InputWithLabel;
//# sourceMappingURL=InputWithLabel.js.map