status-desktop/ui/app/AppLayouts/Chat/views/NormalMessageView.qml

import QtQuick 2.13
import "../../../../shared"
import "../../../../shared/status"

import utils 1.0

import "../panels"
import "../views"
import "../controls"

Item {
    id: root
    anchors.top: parent.top
    anchors.topMargin: authorCurrentMsg !== authorPrevMsg ? Style.current.smallPadding : 0
    height: childrenRect.height + this.anchors.topMargin + (dateGroupLbl.visible ? dateGroupLbl.height : 0)
    width: parent.width

    property var store
    property var messageStore
    property string linkUrls: ""
    property bool isCurrentUser: false
    property int contentType: 2
    property var container
    property bool headerRepeatCondition: (authorCurrentMsg !== authorPrevMsg
                                         || shouldRepeatHeader || dateGroupLbl.visible)

    DateGroup {
        id: dateGroupLbl
        previousMessageIndex: prevMessageIndex
        previousMessageTimestamp: prevMsgTimestamp
        messageTimestamp: timestamp
        isActivityCenterMessage: activityCenterMessage
    }

    UserImage {
        id: chatImage
        active: root.store.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne && isMessage && headerRepeatCondition && !root.isCurrentUser
        anchors.left: parent.left
        anchors.leftMargin: Style.current.padding
        anchors.top:  dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
        anchors.topMargin: 20
//        isCurrentUser: root.messageStore.isCurrentUser
//        profileImage: root.messageStore.profileImageSource
//        isMessage: root.messageStore.isMessage
//        identiconImageSource: root.messageStore.identicon
        onClickMessage: {
            root.parent.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, isReply);
        }
    }

    UsernameLabel {
        id: chatName
        visible: root.store.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne && isMessage && headerRepeatCondition && !root.isCurrentUser
        anchors.leftMargin: 20
        anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
        anchors.topMargin: 0
        anchors.left: chatImage.right
//        isCurrentUser: root.messageStore.isCurrentUser
//        userName: root.messageStore.userName
//        localName: root.messageStore.localName
//        displayUserName: root.messageStore.displayUserName
        onClickMessage: {
            root.parent.clickMessage(true, false, false, null, false, false, false);
        }
    }

    Rectangle {
        readonly property int defaultMessageWidth: 400
        readonly property int defaultMaxMessageChars: 54
        readonly property int messageWidth: Math.max(defaultMessageWidth, parent.width / 1.4)
        readonly property int maxMessageChars: (defaultMaxMessageChars * messageWidth) / defaultMessageWidth
        property int chatVerticalPadding: isImage ? 4 : 6
        property int chatHorizontalPadding: isImage ? 0 : 12
        property bool longReply: chatReply.active && repliedMessageContent.length > maxMessageChars
        property bool longChatText: root.store.chatsModelInst.plainText(root.messageStore.message).split('\n').some(function (messagePart) {
            return messagePart.length > maxMessageChars
        })

        id: chatBox
        color: {
            if (isSticker) {
                return Style.current.background 
            }
            if (isImage) {
                return "transparent"
            }
            return isCurrentUser ? Style.current.primary : Style.current.secondaryBackground
        }
        border.color: isSticker ? Style.current.border : Style.current.transparent
        border.width: 1
        height: {
           let h = (3 * chatVerticalPadding)
           switch(contentType){
                case Constants.stickerType:
                    h += stickerId.height;
                    break;
                case Constants.audioType:
                    h += audioPlayerLoader.height;
                    break;
                default:
                    if (!chatImageContent.active && !chatReply.active) {
                        h -= chatVerticalPadding
                    }

                    h += chatText.visible ? chatText.height : 0;
                    h += chatImageContent.active ? chatImageContent.height: 0;
                    h += chatReply.active ? chatReply.height : 0;
           }
           return h;
        }
        width: {
            switch(contentType) {
                case Constants.stickerType:
                    return stickerId.width + (2 * chatBox.chatHorizontalPadding);
                case Constants.imageType:
                    return chatImageContent.width
                default:
                    if (longChatText || longReply) {
                        return messageWidth;
                    }
                    let baseWidth = chatText.width;
                    if (chatReply.visible && chatText.width < chatReply.textFieldWidth) {
                        baseWidth = chatReply.textFieldWidth
                    }

                    if (chatReply.visible && chatText.width < chatReply.authorWidth) {
                        if(chatReply.authorWidth > baseWidth){
                            baseWidth = chatReply.authorWidth + 20
                        }
                    }

                    return baseWidth + 2 * chatHorizontalPadding
            }
        }

        radius: 16
        anchors.left: !root.isCurrentUser ? chatImage.right : undefined
        anchors.leftMargin: !root.isCurrentUser ? 8 : 0
        anchors.right: !root.isCurrentUser ? undefined : parent.right
        anchors.rightMargin: !root.isCurrentUser ? 0 : Style.current.padding
        anchors.top: headerRepeatCondition && !root.isCurrentUser ? chatImage.top : (dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top)
        anchors.topMargin: 0
        visible: isMessage && contentType !== Constants.transactionType

        ChatReplyPanel {
            id: chatReply
            longReply: chatBox.longReply
            anchors.top: parent.top
            anchors.topMargin: chatReply.visible ? chatBox.chatVerticalPadding : 0
            anchors.left: parent.left
            anchors.leftMargin: Style.current.padding
            anchors.right: parent.right
            anchors.rightMargin: chatBox.chatHorizontalPadding
            container: root.container
            chatHorizontalPadding: chatBox.chatHorizontalPadding
            stickerData: chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "sticker")
            active: responseTo !== "" && replyMessageIndex > -1 && !activityCenterMessage
//            To-Do move to store later?
//            isCurrentUser: root.messageStore.isCurrentUser
//            repliedMessageType: root.messageStore.repliedMessageType
//            repliedMessageImage: root.messageStore.repliedMessageImage
//            repliedMessageUserIdenticon: root.messageStore.repliedMessageUserIdenticon
//            repliedMessageIsEdited: root.messageStore.repliedMessageIsEdited
//            repliedMessageUserImage: root.messageStore.repliedMessageUserImage
//            repliedMessageAuthor: root.messageStore.repliedMessageAuthor
//            repliedMessageContent: root.messageStore.repliedMessageContent
//            responseTo: root.messageStore.responseTo
//            onScrollToBottom: {
//                root.messageStore.scrollToBottom(isit, container);
//            }
            onClickMessage: {
                root.parent.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, isReply);
            }
        }


        Connections {
            target: chatsModel.messageView
            onMessageEdited: {
                if(chatReply.item)
                    chatReply.item.messageEdited(editedMessageId, editedMessageContent)
            }
        }

        ChatTextView {
            id: chatText
            longChatText: chatBox.longChatText
            anchors.top: chatReply.bottom
            anchors.topMargin: chatReply.active ? chatBox.chatVerticalPadding : 0
            anchors.left: parent.left
            anchors.leftMargin: chatBox.chatHorizontalPadding
            anchors.right: chatBox.longChatText ? parent.right : undefined
            anchors.rightMargin: chatBox.longChatText ? chatBox.chatHorizontalPadding : 0
            messageStore: root.store.messageStore
            textField.color: !root.isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor
            Connections {
                target: appSettings.useCompactMode ? null : chatBox
                onLongChatTextChanged: {
                    chatText.setWidths()
                }
            }

            onLinkActivated: {
                if (root.messageStore.activityCenterMessage) {
                    clickMessage(false, root.messageStore.isSticker, false)
                }
            }
        }

        Loader {
            id: chatImageContent
            active: root.messageStore.isImage && !!image
            anchors.top: parent.top
            anchors.topMargin: Style.current.smallPadding
            anchors.left: parent.left
            anchors.leftMargin: chatBox.chatHorizontalPadding
            z: 51

            sourceComponent: Component {
                Item {
                    width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding
                    height: chatImageComponent.height

                    StatusChatImage {
                        id: chatImageComponent
                        imageSource: image
                        imageWidth: 250
                        isCurrentUser: root.isCurrentUser
                        onClicked: imageClick(image)
                        container: root.container
                    }
                }
            }
        }

        Loader {
            id: audioPlayerLoader
            active: root.messageStore.isAudio
            sourceComponent: audioPlayer
            anchors.verticalCenter: parent.verticalCenter
        }

        Component {
            id: audioPlayer
            AudioPlayerPanel {
                audioSource: audio
            }
        }

        StatusSticker {
            id: stickerId
            anchors.left: parent.left
            anchors.leftMargin: chatBox.chatHorizontalPadding
            anchors.top: parent.top
            anchors.topMargin: chatBox.chatVerticalPadding
            color: Style.current.transparent
            contentType: root.contentType
            stickerData: root.messageStore.sticker
            onLoaded: {
                root.messageStore.scrollToBottom(true, root.container)
            }
        }

        MessageMouseArea {
            anchors.fill: parent
            enabled: !chatText.linkHovered
            isActivityCenterMessage: root.messageStore.activityCenterMessage
            onClickMessage: {
                root.parent.clickMessage(isProfileClick, root.messageStore.isSticker, root.messageStore.isImage)
            }
            onSetMessageActive: {
                root.messageStore.setMessageActive(root.messageStore.messageId, active);
            }
        }

        RectangleCorner {
            // TODO find a way to show the corner for stickers since they have a border
            visible: root.messageStore.isMessage
            isCurrentUser: root.isCurrentUser
        }
    }

    Loader {
        id: transactionBubbleLoader
        active: contentType === Constants.transactionType
        anchors.left: !isCurrentUser ? chatImage.right : undefined
        anchors.leftMargin: isCurrentUser ? 0 : Style.current.halfPadding
        anchors.right: isCurrentUser ? parent.right : undefined
        anchors.rightMargin: Style.current.padding
        sourceComponent: Component {
            TransactionBubblePanel {
                balanceView: root.store.walletModelInst.balanceView
                focusedAccount: root.store.walletModelInst.accountsView.focusedAccount
                activeChannelName: root.store.chatsModelInst.channelView.activeChannel.name
                activeChannelIdenticon: root.store.chatsModelInst.channelView.activeChannel.identicon
                onGetGasPrice: {
                    root.store.walletModelInst.gasView.getGasPrice();
                }
                onSendTransactionClicked: {
                    root.store.walletModelInst.accountsView.setFocusedAccountByAddress(fromAddress);
                }
            }
        }
    }

    Rectangle {
        id: dateTimeBackground
        visible: isImage
        height: visible ? chatTime.height + Style.current.halfPadding : 0
        width: chatTime.width + 2 * chatTime.anchors.rightMargin +
               (retry.visible ? retry.width + retry.anchors.rightMargin : sentMessage.width + sentMessage.anchors.rightMargin)
        color: Utils.setColorAlpha(Style.current.black, 0.66)
        radius: Style.current.radius
        anchors.bottom: chatBox.bottom
        anchors.bottomMargin: Style.current.halfPadding
        anchors.right: chatBox.right
        anchors.rightMargin: 6
    }

    ChatTimeView {
        id: chatTime
        visible: root.messageStore.isMessage && !emojiReactionLoader.active
        anchors.top: isImage ? undefined : (linksLoader.active ? linksLoader.bottom : chatBox.bottom)
        anchors.topMargin: isImage ? 0 : 4
        anchors.verticalCenter: isImage ? dateTimeBackground.verticalCenter : undefined
        anchors.right: isImage ? dateTimeBackground.right : (linksLoader.active ? linksLoader.right : chatBox.right)
        anchors.rightMargin: isImage ? 6 : (root.isCurrentUser ? 5 : Style.current.padding)
        //timestamp: root.messageStore.timestamp
    }

    SentMessage {
        id: sentMessage
        visible: root.isCurrentUser && !root.messageStore.timeout && !root.messageStore.isExpired
                 && root.messageStore.isMessage && root.messageStore.outgoingStatus === "sent"
        anchors.verticalCenter: chatTime.verticalCenter
        anchors.right: chatTime.left
        anchors.rightMargin: 5
    }

    Retry {
        id: retry
        anchors.verticalCenter: chatTime.verticalCenter
        anchors.right: chatTime.left
        anchors.rightMargin: 5
        isCurrentUser: root.isCurrentUser
        onClicked: {
            root.store.chatsModelInst.messageView.resendMessage(chatId, messageId)
        }
    }

    Loader {
        id: linksLoader
        active: !!root.linkUrls
        anchors.left: !root.isCurrentUser ? chatImage.right : undefined
        anchors.leftMargin: !root.isCurrentUser ? 8 : 0
        anchors.right: !root.isCurrentUser ? undefined : parent.right
        anchors.rightMargin: !root.isCurrentUser ? 0 : Style.current.padding
        anchors.top: chatBox.bottom
        anchors.topMargin: Style.current.halfPadding
        anchors.bottomMargin: Style.current.halfPadding

        sourceComponent: Component {
            LinksMessageView {
                linkUrls: root.linkUrls
                container: root.container
                isCurrentUser: root.isCurrentUser
            }
        }
    }

    Loader {
        id: emojiReactionLoader
        active: emojiReactions !== ""
        sourceComponent: emojiReactionsComponent
        anchors.left: root.isCurrentUser ? undefined : chatBox.left
        anchors.right: root.isCurrentUser ? chatBox.right : undefined
        anchors.leftMargin: root.isCurrentUser ? Style.current.halfPadding : 1
        anchors.top: chatBox.bottom
        anchors.topMargin: 2
    }

    Component {
        id: emojiReactionsComponent
        EmojiReactionsPanel {
//            isMessageActive: root.store.messageStore.isMessageActive
//            emojiReactionsModel: root.store.messageStore.emojiReactionsModel
            onSetMessageActive: {
                root.store.messageStore.setMessageActive(messageId, active);;
            }
            onToggleReaction: chatsModel.toggleReaction(messageId, emojiID)
        }
    }
}