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

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQml.Models 2.2
import QtGraphicalEffects 1.0

import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1

import utils 1.0
import shared.status 1.0
import shared.controls.delegates 1.0

Page {
    id: root

    property var rootStore
    property var emojiPopup: null

    padding: 0

    Behavior on opacity { NumberAnimation {}}
    Behavior on anchors.bottomMargin { NumberAnimation { duration: 30 }}

    background: Rectangle {
        anchors.fill: parent
        color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
    }

    header: Item {
        implicitHeight: headerLayout.implicitHeight + headerLayout.anchors.topMargin + headerLayout.anchors.bottomMargin

        RowLayout {
            id: headerLayout
            anchors {
                fill: parent
                topMargin: 8
            }

            MembersSelectorView {
                id: membersSelector

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.leftMargin: 16
                Layout.rightMargin: 16

                rootStore: root.rootStore
                enabled: root.rootStore.contactsModel.count > 0

                function createChat() {
                    if (model.count === 0) {
                        console.warn("Can't create chat with no members")
                        return
                    }

                    if (model.count === 1) {
                        const member = model.get(0)
                        const ensName = member.displayName.includes(".eth") ? member.displayName : ""
                        root.rootStore.chatCommunitySectionModule.createOneToOneChat("", member.pubKey, ensName)
                    } else {
                        var groupName = "";
                        var pubKeys = [];
                        for (var i = 0; i < model.count; i++) {
                            const member = model.get(i)
                            groupName += (member.displayName + (i === model.count - 1 ? "" : "&"))
                            pubKeys.push(member.pubKey)
                        }
                        root.rootStore.chatCommunitySectionModule.createGroupChat("", groupName, JSON.stringify(pubKeys))
                    }
                }

                onConfirmed: {
                    root.rootStore.createChatInitMessage = chatInput.textInput.text
                    root.rootStore.createChatFileUrls = chatInput.fileUrls
                    createChat()

                    cleanup()
                    chatInput.textInput.clear()
                }

                onRejected: {
                    cleanup()
                    Global.closeCreateChatView()
                }

                onVisibleChanged: if (visible) edit.forceActiveFocus()
            }

            StatusActivityCenterButton {
                Layout.preferredWidth: 32
                Layout.preferredHeight: 32

                unreadNotificationsCount: root.rootStore.unreadNotificationsCount
                onClicked: Global.openActivityCenterPopup()
            }
        }
    }

    contentItem: Item {
        ColumnLayout {
            anchors {
                fill: parent
                topMargin: 32
                bottomMargin: 12
                leftMargin: 8
            }

            StatusBaseText {
                Layout.alignment: Qt.AlignTop
                Layout.leftMargin: 8

                visible: contactsList.visible

                font.pixelSize: 15
                text: qsTr("Contacts")
                color: Theme.palette.baseColor1
            }

            StatusListView {
                id: contactsList

                Layout.fillHeight: true

                visible: membersSelector.suggestionsModel.count &&
                         !(membersSelector.edit.text !== "")

                implicitWidth: contentItem.childrenRect.width

                model: membersSelector.suggestionsModel
                delegate: ContactListItemDelegate {
                    onClicked: membersSelector.entryAccepted(this)
                }
            }

            StatusChatInput {
                id: chatInput

                Layout.alignment: Qt.AlignBottom
                Layout.fillWidth: true

                visible: membersSelector.model.count > 0
                chatType: membersSelector.model.count === 1? Constants.chatType.oneToOne : Constants.chatType.privateGroupChat

                emojiPopup: root.emojiPopup
                recentStickers: root.rootStore.stickersModuleInst.recent
                stickerPackList: root.rootStore.stickersModuleInst.stickerPacks
                closeGifPopupAfterSelection: true

                onSendTransactionCommandButtonClicked: {
                    root.rootStore.createChatStartSendTransactionProcess = true;
                    root.createChat();
                }

                onReceiveTransactionCommandButtonClicked: {
                    root.rootStore.createChatStartReceiveTransactionProcess = true;
                    root.createChat();
                }

                onStickerSelected: {
                    root.rootStore.createChatStickerHashId = hashId;
                    root.rootStore.createChatStickerPackId = packId;
                    root.rootStore.createChatStickerUrl = url;
                    root.createChat();
                }

                onSendMessage: {
                    root.rootStore.createChatFileUrls = chatInput.fileUrls;
                    root.rootStore.createChatInitMessage = chatInput.textInput.text;
                    root.createChat();
                }
            }
        }

        StatusBaseText {
            anchors.centerIn: parent
            width: Math.min(553, parent.width - 2 * Style.current.padding)
            visible: root.rootStore.contactsModel.count === 0
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            wrapMode: Text.WordWrap
            font.pixelSize: 15
            color: Theme.palette.baseColor1
            text: qsTr("You can only send direct messages to your Contacts.\n
Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")
        }
    }
}