status-desktop/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml

import QtQuick 2.13
import QtQuick.Controls 2.3

import utils 1.0
import shared 1.0
import shared.views 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.views.chat 1.0

import "../controls"
import "../panels"
//TODO remove or make view?
import "../views"

import StatusQ.Controls 0.1 as StatusQControls

// TODO: replace with StatusMOdal
ModalPopup {
    id: popup

    property var messageStore
    property var pinnedMessagesModel //this doesn't belong to the messageStore, it is a part of the ChatContentStore, but we didn't introduce it yet.
    property string messageToPin
    property string messageToUnpin

    header: Item {
        height: childrenRect.height
        width: parent.width

        StyledText {
            id: title
            //% "Pin limit reached"
            text: !!popup.messageToPin ? qsTrId("pin-limit-reached") :
                                               //% "Pinned messages"
                                               qsTrId("pinned-messages")
            anchors.top: parent.top
            anchors.left: parent.left
            font.bold: true
            font.pixelSize: 17
        }

        StyledText {
            property int nbMessages: pinnedMessageListView.count

            id: nbPinnedMessages
            text: {
                if (!!popup.messageToPin) {
                    //% "Unpin a previous message first"
                    return qsTrId("unpin-a-previous-message-first")
                }

                //% "%1 messages"
                return nbMessages > 1 ? qsTrId("-1-messages").arg(nbMessages) :
                                        //% "%1 message"
                                        qsTrId("-1-message").arg(nbMessages)
            }
            anchors.left: parent.left
            anchors.top: title.bottom
            anchors.topMargin: 2
            font.pixelSize: 15
            color: Style.current.secondaryText
        }

        Separator {
            anchors.top: nbPinnedMessages.bottom
            anchors.topMargin: Style.current.padding
            anchors.left: parent.left
            anchors.leftMargin: -Style.current.padding
            anchors.right: parent.right
            anchors.rightMargin: -Style.current.padding
        }
    }

    Item {
        anchors.fill: parent

        StyledText {
            visible: pinnedMessageListView.count === 0
            //% "Pinned messages will appear here."
            text: qsTrId("pinned-messages-will-appear-here-")
            anchors.centerIn: parent
            color: Style.current.secondaryText
        }

        ButtonGroup {
            id: pinButtonGroup
        }

        ListView {
            id: pinnedMessageListView
            model: popup.pinnedMessagesModel
            height: parent.height
            anchors.left: parent.left
            anchors.leftMargin: -Style.current.padding
            anchors.right: parent.right
            anchors.rightMargin: -Style.current.padding
            topMargin: Style.current.halfPadding
            anchors.top: parent.top
            anchors.topMargin: -Style.current.halfPadding
            clip: true

            delegate: Item {
                id: messageDelegate
                property var listView: ListView.view
                width: parent.width
                height: messageItem.height

                MessageView {
                    id: messageItem
                    messageStore: popup.messageStore
                    messageContextMenu: msgContextMenu

                    messageId: model.id
                    responseToMessageWithId: model.responseToMessageWithId
                    senderId: model.senderId
                    senderDisplayName: model.senderDisplayName
                    senderLocalName: model.senderLocalName
                    senderIcon: model.senderIcon
                    isSenderIconIdenticon: model.isSenderIconIdenticon
                    amISender: model.amISender
                    message: model.messageText
                    messageImage: model.messageImage
                    messageTimestamp: model.timestamp
                    messageOutgoingStatus: model.outgoingStatus
                    messageContentType: model.contentType
                    pinnedMessage: model.pinned
                    reactionsModel: model.reactions

                    // This is possible since we have all data loaded before we load qml.
                    // When we fetch messages to fulfill a gap we have to set them at once.
                    prevMessageIndex: index - 1
                    prevMessageAsJsonObj: popup.messageStore? popup.messageStore.getMessageByIndexAsJson(index - 1) : {}
                    nextMessageIndex: index + 1
                    nextMessageAsJsonObj: popup.messageStore? popup.messageStore.messageStore.getMessageByIndexAsJson(index + 1) : {}

                    // Additional params
                    forceHoverHandler: !popup.messageToPin
                }

                MouseArea {
                    anchors.fill: parent
                    enabled: !!popup.messageToPin
                    cursorShape: Qt.PointingHandCursor
                    z: 55
                    onClicked: radio.toggle()
                }

                StatusQControls.StatusRadioButton {
                    id: radio
                    visible: !!popup.messageToPin
                    anchors.right: parent.right
                    anchors.rightMargin: 18
                    anchors.verticalCenter: parent.verticalCenter
                    ButtonGroup.group: pinButtonGroup
                    function toggle() {
                        radio.checked = !radio.checked
                        if (radio.checked) {
                            popup.messageToUnpin = model.id
                        }
                    }
                }
            }
        }        
        MessageContextMenuView {
            id: msgContextMenu
            reactionModel: root.rootStore.emojiReactionsModel
            pinnedPopup: true
            pinnedMessage: true
            onShouldCloseParentPopup: {
                popup.close()
            }

            onPinMessage: {
                popup.messageStore.pinMessage(messageId)
            }

            onUnpinMessage: {
                popup.messageStore.unpinMessage(messageId)
            }

            onToggleReaction: {
                popup.messageStore.toggleReaction(messageId, emojiId)
            }
        }
    }


    footer: Item {
        width: parent.width
        height: btnUnpin.height

        StatusQControls.StatusButton {
            id: btnUnpin
            visible: !!popup.messageToPin
            enabled: !!popup.messageToUnpin
            //% "Unpin"
            text: qsTrId("unpin")
            type: StatusQControls.StatusBaseButton.Type.Danger
            anchors.right: parent.right
            onClicked: {
                popup.messageStore.unpinMessage(popup.messageToUnpin)
                popup.messageToUnpin = ""
                popup.messageToPin = ""
                popup.close()
            }
        }
    }
}