'use strict';

var _tslib = require('./bundle-DhtZdKsr.js');
var React = require('react');
var useSendbirdStateContext = require('../useSendbirdStateContext.js');
var Channel_context = require('../Channel/context.js');
var index = require('./bundle-nox41MG6.js');
var utils$1 = require('./bundle-CrbMqpah.js');
var index$1 = require('./bundle-tntEm-Mv.js');
var LocalizationContext = require('./bundle-6SzyBwQ5.js');
var SuggestedMentionListView = require('./bundle--QPuGnli.js');
var utils = require('./bundle-jcgWT1ad.js');
var Message_hooks_useDirtyGetMentions = require('../Message/hooks/useDirtyGetMentions.js');
var ui_DateSeparator = require('../ui/DateSeparator.js');
var ui_Label = require('./bundle-VxcYXhwp.js');
var ui_MessageInput = require('../ui/MessageInput.js');
var _const = require('./bundle--tki3Ejh.js');
var ui_MessageContent = require('../ui/MessageContent.js');
var Channel_components_FileViewer = require('./bundle-LsJ9u7uN.js');
var Channel_components_RemoveMessageModal = require('./bundle--t85OO-4.js');

var useDidMountEffect = function (func, deps) {
    var _a = React.useState(false), didMount = _a[0], setDidmount = _a[1];
    React.useEffect(function () {
        if (didMount) {
            func();
        }
        else {
            setDidmount(true);
        }
    }, deps);
};

function omitObjectProperties(obj, properties) {
    var newObj = _tslib.__assign({}, obj);
    properties.forEach(function (propertyName) {
        if (Object.hasOwn(newObj, propertyName))
            delete newObj[propertyName];
    });
    return newObj;
}

var SuggestedReplies = function (_a) {
    var replyOptions = _a.replyOptions, onSendMessage = _a.onSendMessage;
    var _b = React.useState(false), replied = _b[0], setReplied = _b[1];
    var onClickReply = function (event, option) {
        event.preventDefault();
        onSendMessage({ message: option });
        setReplied(true);
    };
    if (replied) {
        return null;
    }
    return (React.createElement("div", { className: "sendbird-suggested-replies" }, replyOptions.map(function (option, index) {
        return (React.createElement("div", { className: "sendbird-suggested-replies__option", id: option, key: index + option, onClick: function (e) { return onClickReply(e, option); } }, option));
    })));
};

// TODO: Refactor this component, is too complex now
var MessageView = function (props) {
    var _a, _b;
    var 
    // MessageProps
    message = props.message, renderMessage = props.renderMessage, _c = props.renderMessageContent, renderMessageContent = _c === void 0 ? function (props) { return React.createElement(ui_MessageContent, _tslib.__assign({}, props)); } : _c, renderCustomSeparator = props.renderCustomSeparator, renderEditInput = props.renderEditInput, hasSeparator = props.hasSeparator, chainTop = props.chainTop, chainBottom = props.chainBottom, handleScroll = props.handleScroll, 
    // MessageViewProps
    channel = props.channel, emojiContainer = props.emojiContainer, editInputDisabled = props.editInputDisabled, shouldRenderSuggestedReplies = props.shouldRenderSuggestedReplies, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, renderUserMentionItem = props.renderUserMentionItem, scrollToMessage = props.scrollToMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onQuoteMessageClick = props.onQuoteMessageClick, onReplyInThreadClick = props.onReplyInThreadClick, sendUserMessage = props.sendUserMessage, updateUserMessage = props.updateUserMessage, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, renderFileViewer = props.renderFileViewer, renderRemoveMessageModal = props.renderRemoveMessageModal, setAnimatedMessageId = props.setAnimatedMessageId, animatedMessageId = props.animatedMessageId, onMessageAnimated = props.onMessageAnimated, highLightedMessageId = props.highLightedMessageId, setHighLightedMessageId = props.setHighLightedMessageId, onMessageHighlighted = props.onMessageHighlighted;
    var _d = LocalizationContext.useLocalization(), dateLocale = _d.dateLocale, stringSet = _d.stringSet;
    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
    var _e = globalStore.config, userId = _e.userId, isOnline = _e.isOnline, isMentionEnabled = _e.isMentionEnabled, userMention = _e.userMention, logger = _e.logger;
    var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || SuggestedMentionListView.MAX_USER_MENTION_COUNT;
    var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || SuggestedMentionListView.MAX_USER_SUGGESTION_COUNT;
    var _f = React.useState(false), showEdit = _f[0], setShowEdit = _f[1];
    var _g = React.useState(false), showRemove = _g[0], setShowRemove = _g[1];
    var _h = React.useState(false), showFileViewer = _h[0], setShowFileViewer = _h[1];
    var _j = React.useState(false), isAnimated = _j[0], setIsAnimated = _j[1];
    var _k = React.useState(false), isHighlighted = _k[0], setIsHighlighted = _k[1];
    var _l = React.useState(''), mentionNickname = _l[0], setMentionNickname = _l[1];
    var _m = React.useState([]), mentionedUsers = _m[0], setMentionedUsers = _m[1];
    var _o = React.useState([]), mentionedUserIds = _o[0], setMentionedUserIds = _o[1];
    var _p = React.useState(null), messageInputEvent = _p[0], setMessageInputEvent = _p[1];
    var _q = React.useState(null), selectedUser = _q[0], setSelectedUser = _q[1];
    var _r = React.useState([]), mentionSuggestedUsers = _r[0], setMentionSuggestedUsers = _r[1];
    var editMessageInputRef = React.useRef(null);
    var messageScrollRef = React.useRef(null);
    var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !utils.isDisabledBecauseFrozen(channel) && !utils.isDisabledBecauseMuted(channel);
    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
    React.useEffect(function () {
        setMentionedUsers(mentionedUsers.filter(function (_a) {
            var userId = _a.userId;
            var i = mentionedUserIds.indexOf(userId);
            if (i < 0) {
                return false;
            }
            else {
                mentionedUserIds.splice(i, 1);
                return true;
            }
        }));
    }, [mentionedUserIds]);
    /**
     * Move the messsage list scroll
     * when the message's height is changed by `showEdit` OR `message.reactions`
     */
    useDidMountEffect(function () {
        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
    }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
    useDidMountEffect(function () {
        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
    }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
    React.useLayoutEffect(function () {
        // Keep the scrollBottom value after fetching new message list
        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
    }, []);
    React.useLayoutEffect(function () {
        var timeouts = [];
        if (highLightedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
            setIsAnimated(false);
            timeouts.push(setTimeout(function () {
                setIsHighlighted(true);
            }, 500));
            timeouts.push(setTimeout(function () {
                setHighLightedMessageId(0);
                onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
            }, 1600));
        }
        else {
            setIsHighlighted(false);
        }
        return function () {
            timeouts.forEach(function (it) { return clearTimeout(it); });
        };
    }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
    React.useLayoutEffect(function () {
        var timeouts = [];
        if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
            setIsHighlighted(false);
            timeouts.push(setTimeout(function () {
                setIsAnimated(true);
            }, 500));
            timeouts.push(setTimeout(function () {
                setAnimatedMessageId(0);
                onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
            }, 1600));
        }
        else {
            setIsAnimated(false);
        }
        return function () {
            timeouts.forEach(function (it) { return clearTimeout(it); });
        };
    }, [animatedMessageId, messageScrollRef.current, message.messageId]);
    var renderedCustomSeparator = React.useMemo(function () { var _a; return (_a = renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({ message: message })) !== null && _a !== void 0 ? _a : null; }, [message, renderCustomSeparator]);
    var renderedMessage = React.useMemo(function () { return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage(omitObjectProperties(props, ['renderMessage'])); }, [message, renderMessage]);
    if (renderedMessage) {
        return (React.createElement("div", { "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef, className: index.getClassName([
                'sendbird-msg-hoc sendbird-msg--scroll-ref',
                isAnimated ? 'sendbird-msg-hoc__animated' : '',
                isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
            ]) },
            // TODO: Add message instance as a function parameter
            hasSeparator
                && (renderedCustomSeparator || (React.createElement(ui_DateSeparator, null,
                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
                        locale: dateLocale,
                    }))))),
            renderedMessage));
    }
    if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
        return ((renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || (React.createElement(React.Fragment, null,
            displaySuggestedMentionList && (React.createElement(SuggestedMentionListView.SuggestedMentionListView, { currentChannel: channel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
                    if (user) {
                        setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
                    }
                    setMentionNickname('');
                    setSelectedUser(user);
                    setMessageInputEvent(null);
                }, onFocusItemChange: function () {
                    setMessageInputEvent(null);
                }, onFetchUsers: function (users) {
                    setMentionSuggestedUsers(users);
                }, ableAddMention: ableMention, maxMentionCount: maxUserMentionCount, maxSuggestionCount: maxUserSuggestionCount })),
            React.createElement(ui_MessageInput, { isEdit: true, channel: channel, disabled: editInputDisabled, ref: editMessageInputRef, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, message: message, onStartTyping: function () {
                    var _a;
                    (_a = channel === null || channel === void 0 ? void 0 : channel.startTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
                }, onUpdateMessage: function (_a) {
                    var _b;
                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
                    updateUserMessage(messageId, {
                        message: message,
                        mentionedUsers: mentionedUsers,
                        mentionedMessageTemplate: mentionTemplate,
                    });
                    setShowEdit(false);
                    (_b = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _b === void 0 ? void 0 : _b.call(channel);
                }, onCancelEdit: function () {
                    var _a;
                    setMentionNickname('');
                    setMentionedUsers([]);
                    setMentionedUserIds([]);
                    setMentionSuggestedUsers([]);
                    setShowEdit(false);
                    (_a = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
                }, onUserMentioned: function (user) {
                    if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
                        setSelectedUser(null);
                        setMentionNickname('');
                    }
                }, onMentionStringChange: function (mentionText) {
                    setMentionNickname(mentionText);
                }, onMentionedUserIdsUpdated: function (userIds) {
                    setMentionedUserIds(userIds);
                }, onKeyDown: function (e) {
                    if (displaySuggestedMentionList
                        && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
                        && ((e.key === _const.MessageInputKeys.Enter && ableMention)
                            || e.key === _const.MessageInputKeys.ArrowUp
                            || e.key === _const.MessageInputKeys.ArrowDown)) {
                        setMessageInputEvent(e);
                        return true;
                    }
                    return false;
                } }))));
    }
    return (React.createElement("div", { className: index.getClassName([
            'sendbird-msg-hoc sendbird-msg--scroll-ref',
            isAnimated ? 'sendbird-msg-hoc__animated' : '',
            isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
        ]), style: { marginBottom: '2px' }, "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef },
        hasSeparator
            && (renderedCustomSeparator || (React.createElement(ui_DateSeparator, null,
                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
                    locale: dateLocale,
                }))))),
        renderMessageContent({
            className: 'sendbird-message-hoc__message-content',
            userId: userId,
            scrollToMessage: scrollToMessage,
            channel: channel,
            message: message,
            disabled: !isOnline,
            chainTop: chainTop,
            chainBottom: chainBottom,
            isReactionEnabled: isReactionEnabled,
            replyType: replyType,
            threadReplySelectType: threadReplySelectType,
            nicknamesMap: nicknamesMap,
            emojiContainer: emojiContainer,
            showEdit: setShowEdit,
            showRemove: setShowRemove,
            showFileViewer: setShowFileViewer,
            resendMessage: resendMessage,
            deleteMessage: deleteMessage,
            toggleReaction: toggleReaction,
            setQuoteMessage: setQuoteMessage,
            onReplyInThread: onReplyInThreadClick,
            onQuoteMessageClick: onQuoteMessageClick,
            onMessageHeightChange: handleScroll,
        }),
        /** Suggested Replies */
        shouldRenderSuggestedReplies && React.createElement(SuggestedReplies, { replyOptions: index.getSuggestedReplies(message), onSendMessage: sendUserMessage }),
        showRemove && renderRemoveMessageModal({ message: message, onCancel: function () { return setShowRemove(false); } }),
        showFileViewer && renderFileViewer({ message: message, onCancel: function () { return setShowFileViewer(false); } })));
};

var Message = function (props) {
    var _a;
    var config = useSendbirdStateContext.useSendbirdStateContext().config;
    var _b = Channel_context.useChannelContext(), initialized = _b.initialized, currentGroupChannel = _b.currentGroupChannel, highLightedMessageId = _b.highLightedMessageId, setHighLightedMessageId = _b.setHighLightedMessageId, animatedMessageId = _b.animatedMessageId, setAnimatedMessageId = _b.setAnimatedMessageId, updateMessage = _b.updateMessage, scrollToMessage = _b.scrollToMessage, replyType = _b.replyType, threadReplySelectType = _b.threadReplySelectType, isReactionEnabled = _b.isReactionEnabled, toggleReaction = _b.toggleReaction, emojiContainer = _b.emojiContainer, nicknamesMap = _b.nicknamesMap, setQuoteMessage = _b.setQuoteMessage, resendMessage = _b.resendMessage, deleteMessage = _b.deleteMessage, renderUserMentionItem = _b.renderUserMentionItem, onReplyInThread = _b.onReplyInThread, onQuoteMessageClick = _b.onQuoteMessageClick, onMessageAnimated = _b.onMessageAnimated, onMessageHighlighted = _b.onMessageHighlighted, sendMessage = _b.sendMessage, localMessages = _b.localMessages;
    var message = props.message;
    return (React.createElement(MessageView, _tslib.__assign({}, props, { channel: currentGroupChannel, emojiContainer: emojiContainer, editInputDisabled: !initialized || utils$1.isDisabledBecauseFrozen(currentGroupChannel) || utils$1.isDisabledBecauseMuted(currentGroupChannel) || !config.isOnline, shouldRenderSuggestedReplies: message.messageId === ((_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.lastMessage) === null || _a === void 0 ? void 0 : _a.messageId)
            // the options should appear only when there's no failed or pending messages
            && localMessages.every(function (message) { return message.sendingStatus === 'succeeded'; })
            && index.getSuggestedReplies(message).length > 0, isReactionEnabled: isReactionEnabled, replyType: replyType, threadReplySelectType: threadReplySelectType, nicknamesMap: nicknamesMap, renderUserMentionItem: renderUserMentionItem, scrollToMessage: scrollToMessage, toggleReaction: toggleReaction, setQuoteMessage: setQuoteMessage, onQuoteMessageClick: onQuoteMessageClick, onReplyInThreadClick: onReplyInThread, sendUserMessage: function (params) {
            sendMessage({
                message: params.message,
                mentionedUsers: params.mentionedUsers,
                mentionTemplate: params.mentionedMessageTemplate,
            });
        }, updateUserMessage: function (messageId, params) {
            updateMessage({
                messageId: messageId,
                message: params.message,
                mentionedUsers: params.mentionedUsers,
                mentionTemplate: params.mentionedMessageTemplate,
            });
        }, resendMessage: resendMessage, deleteMessage: deleteMessage, animatedMessageId: animatedMessageId, setAnimatedMessageId: setAnimatedMessageId, onMessageAnimated: onMessageAnimated, highLightedMessageId: highLightedMessageId, setHighLightedMessageId: setHighLightedMessageId, onMessageHighlighted: onMessageHighlighted, renderFileViewer: function (props) { return React.createElement(Channel_components_FileViewer.FileViewer, _tslib.__assign({}, props)); }, renderRemoveMessageModal: function (props) { return React.createElement(Channel_components_RemoveMessageModal.RemoveMessageModal, _tslib.__assign({}, props)); } })));
};

exports.Message = Message;
exports.MessageView = MessageView;
//# sourceMappingURL=bundle-Eqd9bAds.js.map
