// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, mergeStyles, Stack } from '@fluentui/react';
import { ChatMyMessage } from '@fluentui-contrib/react-chat';
import { mergeClasses } from '@fluentui/react-components';
import { _formatString } from "../../../../../acs-ui-common/src";
import { useTheme } from '../../../theming/FluentThemeProvider';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../../styles/EditBox.styles';
import { InputBoxComponent } from '../../InputBoxComponent';
import { InputBoxButton } from '../../InputBoxButton';
import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
import { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';
import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
/**
 * @private
 */
export const ChatMessageComponentAsEditBox = (props) => {
    const { onCancel, onSubmit, strings, message } = props;
    const [textValue, setTextValue] = useState(message.content || '');
    const editTextFieldRef = React.useRef(null);
    const theme = useTheme();
    const messageState = getMessageState(textValue);
    const submitEnabled = messageState === 'OK';
    const editContainerStyles = useChatMessageEditContainerStyles();
    const chatMyMessageStyles = useChatMyMessageStyles();
    useEffect(() => {
        var _a;
        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, []);
    const setText = (event, newValue) => {
        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
    };
    const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {
        limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`
    }) : undefined;
    const iconClassName = useCallback((isHover) => {
        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
        return mergeStyles(inputBoxIcon, {
            color
        });
    }, [theme.palette.accent, theme.palette.neutralSecondary]);
    const onRenderThemedCancelIcon = useCallback((isHover) => {
        return onRenderCancelIcon(iconClassName(isHover));
    }, [iconClassName]);
    const onRenderThemedSubmitIcon = useCallback((isHover) => {
        return onRenderSubmitIcon(iconClassName(isHover));
    }, [iconClassName]);
    const editBoxStyles = useMemo(() => {
        return concatStyleSets(editBoxStyleSet, {
            textField: {
                borderColor: theme.palette.themePrimary
            }
        });
    }, [theme.palette.themePrimary]);
    const getContent = () => {
        return React.createElement(React.Fragment, null,
            React.createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
                    if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                        ev.stopPropagation();
                    }
                }, onEnterKeyDown: () => {
                    submitEnabled && onSubmit(textValue);
                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles }),
            React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: {
                    childrenGap: '0.25rem'
                } },
                message.failureReason && React.createElement(Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
                    React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason)),
                React.createElement(Stack.Item, { align: "end" },
                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                            onCancel && onCancel(message.messageId);
                        }, id: 'dismissIconWrapper', "data-testId": "chat-message-edit-box-cancel-button" })),
                React.createElement(Stack.Item, { align: "end" },
                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
                            // it's very important to pass an empty attachment here
                            // so when user remvoes all attachments, UI can reflect it instantly
                            // if you set it to undefined, the attachments pre-edited would still be there
                            // until edit message event is received
                            submitEnabled && onSubmit(textValue);
                            e.stopPropagation();
                        }, id: 'submitIconWrapper', "data-testId": "chat-message-edit-box-submit-button" }))));
    };
    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
    return React.createElement(ChatMyMessage, { attached: attached, root: {
            className: mergeClasses(chatMyMessageStyles.root)
        }, body: {
            className: mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
        } }, getContent());
};
//# sourceMappingURL=ChatMessageComponentAsEditBox.js.map