// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback } from 'react';
import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
import { isEnterKeyEventFromCompositionSession } from './utils';
import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
/**
 * @private
 */
export const InputBoxComponent = (props) => {
    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
    const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
    const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);
    const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
    const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
        fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
        suffix: {
            backgroundColor: 'transparent',
            padding: '0 0'
        }
    });
    const onTextFieldKeyDown = useCallback((ev) => {
        if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {
            return;
        }
        if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
            ev.preventDefault();
            onEnterKeyDown && onEnterKeyDown();
        }
        onKeyDown && onKeyDown(ev);
    }, [onEnterKeyDown, onKeyDown, supportNewline]);
    const onRenderChildren = () => {
        return React.createElement(React.Fragment, null, children);
    };
    const renderTextField = () => {
        const textFieldProps = {
            autoFocus: props.autoFocus === 'sendBoxTextField',
            multiline: true,
            autoAdjustHeight: true,
            multiple: false,
            resizable: false,
            componentRef: textFieldRef,
            id,
            inputClassName: mergedInputFieldStyle,
            placeholder: placeholderText,
            autoComplete: 'off',
            styles: mergedTextFieldStyle,
            disabled,
            errorMessage,
            onRenderSuffix: props.children ? onRenderChildren : undefined
        };
        return React.createElement("div", { style: textFieldProps.errorMessage ? {
                padding: '0 0 5px 5px'
            } : undefined },
            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: e => {
                    // Fix for setting the cursor to the correct position when multiline is true
                    // This approach should be reviewed during migration to FluentUI v9
                    e.currentTarget.value = '';
                    e.currentTarget.value = textValue;
                } })));
    };
    return React.createElement(Stack, { className: mergedRootStyle },
        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField()));
};
//# sourceMappingURL=InputBoxComponent.js.map