import { Theme } from '@mui/material';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { makeStyles } from 'tss-react/mui';

import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { getParticipantById, getParticipantDisplayName, isPrivateChatEnabled } from '../../../base/participants/functions';
import Popover from '../../../base/popover/components/Popover.web';
import Message from '../../../base/react/components/web/Message';
import { MESSAGE_TYPE_LOCAL } from '../../constants';
// AFTER
import { getActiveChatSearchMatch, getChatSearchQuery, getDisplayNameSuffix, getFormattedTimestamp, getMessageText, getPrivateNoticeMessage, isFileMessage } from '../../functions';
import { IChatMessageProps } from '../../types';

import FileMessage from './FileMessage';
import MessageMenu from './MessageMenu';
import ReactButton from './ReactButton';

interface IProps extends IChatMessageProps {
    className?: string;
    enablePrivateChat?: boolean;
    isActiveSearchMatch?: boolean;
    isEditing?: boolean;
    onCancelEdit?: () => void;
    onEditMessage?: (message: IChatMessageProps['message']) => void;
    searchQuery?: string;
    shouldDisplayMenuOnRight?: boolean;
    state?: IReduxState;
}

const useStyles = makeStyles()((theme: Theme) => {
    return {
        chatMessageFooter: {
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginTop: theme.spacing(1)
        },
        chatMessageFooterLeft: {
            display: 'flex',
            flexGrow: 1,
            overflow: 'hidden'
        },
        chatMessageWrapper: {
            maxWidth: '100%'
        },
        chatMessage: {
            display: 'inline-flex',
            padding: '12px',
            backgroundColor: theme.palette.chatMessageRemote,
            borderRadius: '4px 12px 12px 12px',
            maxWidth: '100%',
            marginTop: '4px',
            boxSizing: 'border-box' as const,

            '&.file': {
                display: 'flex',
                maxWidth: '100%',
                minWidth: 0,

                '& $replyWrapper': {
                    width: '100%',
                    minWidth: 0
                },

                '& $messageContent': {
                    width: '100%',
                    minWidth: 0
                }
            },

            '&.privatemessage': {
                backgroundColor: theme.palette.chatMessagePrivate
            },
            '&.local': {
                backgroundColor: theme.palette.chatMessageLocal,
                borderRadius: '12px 4px 12px 12px',

                '&.privatemessage': {
                    backgroundColor: theme.palette.chatMessagePrivate
                },
                '&.local': {
                    backgroundColor: theme.palette.chatMessageLocal,
                    borderRadius: '12px 4px 12px 12px',

                    '&.privatemessage': {
                        backgroundColor: theme.palette.chatMessagePrivate
                    }
                },

                '&.error': {
                    backgroundColor: theme.palette.actionDanger,
                    borderRadius: 0,
                    fontWeight: 100
                },

                '&.lobbymessage': {
                    backgroundColor: theme.palette.chatMessagePrivate
                }
            },
            '&.error': {
                backgroundColor: theme.palette.actionDanger,
                borderRadius: 0,
                fontWeight: 100
            },
            '&.lobbymessage': {
                backgroundColor: theme.palette.chatMessagePrivate
            }
        },
        searchMatchActive: {
            outline: `2px solid ${theme.palette.action01}`,
            outlineOffset: '2px',
            animation: '$searchMatchFlash 1.4s ease-out'
        },

        '@keyframes searchMatchFlash': {
            '0%': {
                backgroundColor: theme.palette.warning01
            },
            '100%': {
                backgroundColor: 'transparent'
            }
        },
        sideBySideContainer: {
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'left',
            alignItems: 'center',
            marginLeft: theme.spacing(1)
        },
        reactionBox: {
            display: 'flex',
            alignItems: 'center',
            gap: theme.spacing(1),
            backgroundColor: theme.palette.grey[800],
            borderRadius: theme.shape.borderRadius,
            padding: theme.spacing(0, 1),
            cursor: 'pointer'
        },
        reactionCount: {
            fontSize: '0.8rem',
            color: theme.palette.grey[400]
        },
        replyButton: {
            padding: '2px'
        },
        replyWrapper: {
            display: 'flex',
            flexDirection: 'row' as const,
            alignItems: 'center',
            maxWidth: '100%'
        },
        messageContent: {
            maxWidth: '100%',
            overflow: 'hidden'
        },
        optionsButtonContainer: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: theme.spacing(1),
            minWidth: '32px',
            minHeight: '32px'
        },
        displayName: {
            ...theme.typography.labelBold,
            color: theme.palette.chatSenderName,
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            marginBottom: theme.spacing(1),
            maxWidth: '130px'
        },
        userMessage: {
            ...theme.typography.bodyShortRegular,
            color: theme.palette.chatMessageText,
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word',

            '& mark': {
                backgroundColor: theme.palette.warning01,
                color: theme.palette.text04,
                borderRadius: '2px',
                padding: '0 1px'
            }
        },
        deletedMessage: {
            fontStyle: 'italic',
            opacity: 0.7
        },
        privateMessageNotice: {
            ...theme.typography.labelRegular,
            color: theme.palette.chatPrivateNotice,
            marginTop: theme.spacing(1)
        },
        timestamp: {
            ...theme.typography.labelRegular,
            color: theme.palette.chatTimestamp,
            marginTop: theme.spacing(1),
            marginLeft: theme.spacing(1),
            whiteSpace: 'nowrap',
            flexShrink: 0
        },
        editedLabel: {
            ...theme.typography.labelRegular,
            color: theme.palette.chatTimestamp,
            marginLeft: theme.spacing(1),
            whiteSpace: 'nowrap'
        },
        reactionsPopover: {
            padding: theme.spacing(2),
            backgroundColor: theme.palette.chatInputBackground,
            borderRadius: theme.shape.borderRadius,
            maxWidth: '150px',
            maxHeight: '400px',
            overflowY: 'auto',
            color: theme.palette.chatMessageText
        },
        reactionItem: {
            display: 'flex',
            alignItems: 'center',
            marginBottom: theme.spacing(1),
            gap: theme.spacing(1),
            borderBottom: `1px solid ${theme.palette.common.white}`,
            paddingBottom: theme.spacing(1),
            '&:last-child': {
                borderBottom: 'none',
                paddingBottom: 0
            }
        },
        participantList: {
            marginLeft: theme.spacing(1),
            fontSize: '0.8rem',
            maxWidth: '120px'
        },
        participant: {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
        },
        editingNotice: {
            alignItems: 'center',
            borderTop: `1px solid ${theme.palette.chatInputBorder}`,
            color: theme.palette.chatMessageText,
            display: 'flex',
            justifyContent: 'space-between',
            marginTop: theme.spacing(1),
            paddingTop: theme.spacing(1),
            width: '100%',
            ...theme.typography.labelRegular
        },
        cancelEdit: {
            cursor: 'pointer',
            color: theme.palette.link01
        },
    };
});

const ChatMessage = ({
    className = '',
    isEditing,
    message,
    state,
    showDisplayName,
    shouldDisplayMenuOnRight,
    isActiveSearchMatch,
    searchQuery,
    enablePrivateChat,
    knocking,
    onCancelEdit,
    onEditMessage,
    t
}: IProps) => {
    const { classes, cx } = useStyles();
    const [ isHovered, setIsHovered ] = useState(false);
    const [ isReactionsOpen, setIsReactionsOpen ] = useState(false);
    const messageRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!isActiveSearchMatch || !messageRef.current) {
            return;
        }

        const messageElement = messageRef.current;
        const container = messageElement.closest('#chatconversation') as HTMLElement | null;

        if (!container) {
            return;
        }

        const messageRect = messageElement.getBoundingClientRect();
        const containerRect = container.getBoundingClientRect();

        const offset = messageRect.top
            - containerRect.top
            - (containerRect.height / 2)
            + (messageRect.height / 2);

        container.scrollTo({
            top: container.scrollTop + offset,
            behavior: 'smooth'
        });
    }, [ isActiveSearchMatch ]);

    const handleEditMessage = useCallback(() => {
        onEditMessage?.(message);
    }, [ message, onEditMessage ]);

    const handleMouseEnter = useCallback(() => {
        setIsHovered(true);
    }, []);

    const handleMouseLeave = useCallback(() => {
        setIsHovered(false);
    }, []);

    const handleReactionsOpen = useCallback(() => {
        setIsReactionsOpen(true);
    }, []);

    const handleReactionsClose = useCallback(() => {
        setIsReactionsOpen(false);
    }, []);

    /**
     * Renders the display name of the sender.
     *
     * @returns {React$Element<*>}
     */
    function _renderDisplayName() {
        const { displayName } = message;

        return (
            <div
                aria-hidden = { true }
                className = { cx('display-name', classes.displayName) }>
                {`${displayName}${getDisplayNameSuffix(message)}`}
            </div>
        );
    }

    /**
     * Renders the message privacy notice.
     *
     * @returns {React$Element<*>}
     */
    function _renderPrivateNotice() {
        return (
            <div className = { classes.privateMessageNotice }>
                {getPrivateNoticeMessage(message)}
            </div>
        );
    }

    /**
     * Renders the time at which the message was sent.
     *
     * @returns {React$Element<*>}
     */
    function _renderTimestamp() {
        return (
            <div className = { cx('timestamp', classes.timestamp) }>
                <p>
                    {getFormattedTimestamp(message)}
                </p>
            </div>
        );
    }

    /**
     * Renders the editing notice for which message is edited.
     *
     * @returns {React$Element<*>}
     */
    function _renderEditingNotice() {
        return (
            <div className = { classes.editingNotice }>
                <span>{t('chat.editingMessage', 'Editing')}</span>
                <span
                    className = { classes.cancelEdit }
                    onClick = { onCancelEdit }>
                    {t('chat.cancel', 'Cancel')}
                </span>
            </div>
        );
    }

    /**
     * Renders the reactions for the message.
     *
     * @returns {React$Element<*>}
     */
    const renderReactions = useMemo(() => {
        if (!message.reactions || message.reactions.size === 0) {
            return null;
        }

        const reactionsArray = Array.from(message.reactions.entries())
            .map(([ reaction, participants ]) => {
                return { reaction,
                    participants };
            })
            .sort((a, b) => b.participants.size - a.participants.size);

        const totalReactions = reactionsArray.reduce((sum, { participants }) => sum + participants.size, 0);
        const numReactionsDisplayed = 3;

        const reactionsContent = (
            <div className = { classes.reactionsPopover }>
                {reactionsArray.map(({ reaction, participants }) => (
                    <div
                        className = { classes.reactionItem }
                        key = { reaction }>
                        <p>
                            <span>{reaction}</span>
                            <span>{participants.size}</span>
                        </p>
                        <div className = { classes.participantList }>
                            {Array.from(participants).map(participantId => (
                                <p
                                    className = { classes.participant }
                                    key = { participantId }>
                                    {state && getParticipantDisplayName(state, participantId)}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        );

        return (
            <Popover
                content = { reactionsContent }
                onPopoverClose = { handleReactionsClose }
                onPopoverOpen = { handleReactionsOpen }
                position = 'top'
                trigger = 'hover'
                visible = { isReactionsOpen }>
                <div className = { classes.reactionBox }>
                    {reactionsArray.slice(0, numReactionsDisplayed).map(({ reaction }, index) =>
                        <p key = { index }>{reaction}</p>
                    )}
                    {reactionsArray.length > numReactionsDisplayed && (
                        <p className = { classes.reactionCount }>
                            +{totalReactions - numReactionsDisplayed}
                        </p>
                    )}
                </div>
            </Popover>
        );
    }, [ message?.reactions, isHovered, isReactionsOpen ]);

    const messageText = message.isDeleted
        ? (
            message.messageType === MESSAGE_TYPE_LOCAL
                ? t<string>('chat.deletedMessageByMe')
                : t<string>('chat.deletedMessage')
        )
        : message.isModerated
            ? t('chat.moderatedMessage')
            : getMessageText(message);

    const canEdit = message.messageType === MESSAGE_TYPE_LOCAL
        && !message.lobbyChat
        && !message.isReaction
        && !message.isFromVisitor
        && !isFileMessage(message);

    return (
        <div
            className = { cx(classes.chatMessageWrapper, className) }
            id = { message.messageId }
            onMouseEnter = { handleMouseEnter }
            onMouseLeave = { handleMouseLeave }
            tabIndex = { -1 }>
            <div className = { classes.sideBySideContainer }>
                {!shouldDisplayMenuOnRight && (
                    <div className = { classes.optionsButtonContainer }>
                        {isHovered && !message.isModerated && <MessageMenu
                            canEdit = { canEdit }
                            displayName = { message.displayName }
                            enablePrivateChat = { Boolean(enablePrivateChat) }
                            isFileMessage = { isFileMessage(message) }
                            isFromVisitor = { message.isFromVisitor }
                            isLobbyMessage = { message.lobbyChat }
                            isModerated = { message.isModerated }
                            message = { message }
                            onEditMessage = { handleEditMessage }
                            participantId = { message.participantId } />}
                    </div>
                )}
                <div
                    className = { cx(
                        'chatmessage',
                        classes.chatMessage,
                        className,
                        message.privateMessage && 'privatemessage',
                        message.lobbyChat && !knocking && 'lobbymessage',
                        isFileMessage(message) && 'file',
                        isActiveSearchMatch && classes.searchMatchActive
                    ) }
                    ref = { messageRef }>
                    <div className = { classes.replyWrapper }>
                        <div className = { cx('messagecontent', classes.messageContent) }>
                            {showDisplayName && _renderDisplayName()}
                            <div className = { cx('usermessage', classes.userMessage, message.isDeleted && message.isModerated && classes.deletedMessage) }>
                                {!message.isModerated && isFileMessage(message) ? (
                                    <FileMessage
                                        message = { message }
                                        screenReaderHelpText = { message.messageType === MESSAGE_TYPE_LOCAL
                                            ? t<string>('chat.fileAccessibleTitleMe')
                                            : t<string>('chat.fileAccessibleTitle', {
                                                user: message.displayName
                                            })
                                        } />
                                ) : (
                                    <Message
                                        highlightQuery = { searchQuery }
                                        screenReaderHelpText = { message.messageType === MESSAGE_TYPE_LOCAL
                                            ? t<string>('chat.messageAccessibleTitleMe')
                                            : t<string>('chat.messageAccessibleTitle', {
                                                user: message.displayName
                                            }) }
                                        text = { messageText } />
                                )}
                                {message.isModerated && message.moderationReason && (
                                    <div className = { classes.privateMessageNotice } >
                                        {t('chat.moderationReason', {
                                            reason: message.moderationReason
                                        })}
                                    </div>

                                )}
                                {(message.privateMessage || (message.lobbyChat && !knocking))
                                    && _renderPrivateNotice()}
                                <div className = { classes.chatMessageFooter }>
                                    <div className = { classes.chatMessageFooterLeft }>
                                        {!message.isDeleted && !message.isModerated && message.reactions && message.reactions.size > 0 && (
                                            <>
                                                {renderReactions}
                                            </>
                                        )}
                                    </div>
                                    {message.isEdited && (
                                        <div className = { classes.editedLabel }>
                                            {t('chat.edited', '(edited)')}
                                        </div>
                                    )}
                                    {_renderTimestamp()}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {shouldDisplayMenuOnRight && (
                    <div className = { classes.sideBySideContainer }>
                        {!message.privateMessage && !message.lobbyChat
                        && !message.isReaction && !message.isDeleted && !message.isModerated && <div>
                            <div className = { classes.optionsButtonContainer }>
                                {isHovered && <ReactButton
                                    messageId = { message.messageId }
                                    receiverId = { '' } />}
                            </div>
                        </div>}
                        <div>
                            <div className = { classes.optionsButtonContainer }>
                                {isHovered && !message.isDeleted && !message.isModerated && <MessageMenu
                                    canEdit = { canEdit }
                                    displayName = { message.displayName }
                                    enablePrivateChat = { Boolean(enablePrivateChat) }
                                    isFileMessage = { isFileMessage(message) }
                                    isFromVisitor = { message.isFromVisitor }
                                    isLobbyMessage = { message.lobbyChat }
                                    isModerated = { message.isModerated }
                                    message = { message }
                                    onEditMessage = { handleEditMessage }
                                    participantId = { message.participantId } />}
                            </div>
                        </div>
                    </div>
                )}
            </div>
            {isEditing && _renderEditingNotice()}
        </div>
    );
};

/**
 * Maps part of the Redux store to the props of this component.
 *
 * @param {Object} state - The Redux state.
 * @returns {IProps}
 */
function _mapStateToProps(state: IReduxState, { message }: IProps) {
    const { knocking } = state['features/lobby'];

    const activeSearchMatch = getActiveChatSearchMatch(state);
    const isActiveSearchMatch = Boolean(activeSearchMatch && activeSearchMatch.messageId === message.messageId);

    const participant = getParticipantById(state, message.participantId);

    // For visitor private messages, participant will be undefined but we should still allow private chat
    // Create a visitor participant object for visitor messages to pass to isPrivateChatEnabled
    const participantForCheck = message.isFromVisitor
        ? { id: message.participantId, name: message.displayName, isVisitor: true as const }
        : participant;

    const enablePrivateChat = (!message.isFromVisitor || message.privateMessage)
        && isPrivateChatEnabled(participantForCheck, state);

    // Only the local messages appear on the right side of the chat therefore only for them the menu has to be on the
    // left side.
    const shouldDisplayMenuOnRight = message.messageType !== MESSAGE_TYPE_LOCAL;

    return {
        shouldDisplayMenuOnRight,
        enablePrivateChat,
        isActiveSearchMatch,
        searchQuery: getChatSearchQuery(state),
        knocking,
        state
    };
}

export default translate(connect(_mapStateToProps)(ChatMessage));