status-desktop/ui/imports/shared/controls/chat/ProfileHeader.qml

import QtQuick 2.14
import QtQuick.Layouts 1.14

import utils 1.0
import shared.panels 1.0
import shared.controls 1.0

import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils

Item {
    id: root

    enum ImageSize {
        Compact,
        Middle,
        Big
    }

    property var store
    property string displayName
    property string pubkey
    property string icon
    property url previewIcon: icon
    property int trustStatus
    property bool isContact: false
    property bool isCurrentUser
    property bool userIsEnsVerified
    property rect cropRect

    property int imageSize: ProfileHeader.ImageSize.Compact
    property bool displayNameVisible: true
    property bool displayNamePlusIconsVisible: false
    property bool pubkeyVisible: true
    property bool pubkeyVisibleWithCopy: false
    property bool emojiHashVisible: true
    property bool editImageButtonVisible: false
    property bool editButtonVisible: displayNamePlusIconsVisible
    readonly property bool compact: root.imageSize === ProfileHeader.ImageSize.Compact

    signal clicked()
    signal editClicked()

    Binding on previewIcon {
        value: icon
    }

    height: visible ? contentContainer.height : 0
    implicitHeight: contentContainer.implicitHeight

    QtObject {
        id: d
        function getSize(compact, normal, big) {
            switch(root.imageSize) {
                case ProfileHeader.ImageSize.Compact: return compact;
                case ProfileHeader.ImageSize.Middle: return normal;
                case ProfileHeader.ImageSize.Big: return big;
            }
        }
    }

    Item {
        id: tmpCroppedImageHelper

        visible: false

        Image {
            id: tmpImage
            mipmap: true
        }

        property var keepGrabResultAlive;

        function setCroppedTmpIcon(source, x, y, width, height) {
            tmpCroppedImageHelper.width = width
            tmpCroppedImageHelper.height = height

            tmpImage.x = -x
            tmpImage.y = -y
            tmpImage.source = source

            tmpCroppedImageHelper.grabToImage(result => {
                keepGrabResultAlive = result
                root.previewIcon = result.url
                tmpImage.source = ""
            })
        }
    }

    ColumnLayout {
        id: contentContainer

        spacing: root.compact ? 4 : 12

        anchors {
            left: parent.left
            right: parent.right
            leftMargin: Style.current.smallPadding
            rightMargin: Style.current.smallPadding
        }

        Item {
            Layout.alignment: Qt.AlignHCenter
            implicitWidth: userImage.width
            implicitHeight: userImage.height

            UserImage {
                id: userImage
                objectName: "ProfileHeader_userImage"
                name: root.displayName
                pubkey: root.pubkey
                image: root.previewIcon
                interactive: false
                imageWidth: d.getSize(36, 64, 160)
                imageHeight: imageWidth
                ensVerified: root.userIsEnsVerified
            }

            StatusRoundButton {
                id: editButton
                visible: root.editImageButtonVisible
                anchors.bottom: userImage.bottom
                anchors.right: userImage.right
                anchors.rightMargin: Math.round(userImage.width / 10)

                width: d.getSize(10, 24, 40)
                height: width

                type: StatusRoundButton.Type.Secondary
                icon.name: "edit_pencil"
                icon.width: d.getSize(8, 12, 20)
                icon.height: d.getSize(8, 12, 20)

                onClicked: {
                    if (!!root.store.profileLargeImage)
                        imageEditMenu.popup(this, mouse.x, mouse.y);
                    else
                        Global.openChangeProfilePicPopup(tempIcon);
                }

                function tempIcon(image, aX, aY, bX, bY) {
                    root.icon = image
                    root.cropRect = Qt.rect(aX, aY, bX - aX, bY - aY)

                    tmpCroppedImageHelper.setCroppedTmpIcon(
                                image, aX, aY, bX - aX, bY - aY)
                }
            }
        }

        StyledText {
            Layout.fillWidth: true
            visible: root.displayNameVisible
            text: root.displayName
            horizontalAlignment: Text.AlignHCenter
            elide: Text.ElideRight
            maximumLineCount: 3
            wrapMode: Text.Wrap
            font {
                bold: true
                pixelSize: 17
            }
        }

        RowLayout {
            spacing: compact ? 4 : Style.current.halfPadding
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter
            visible: root.displayNamePlusIconsVisible
            StyledText {
                objectName: "ProfileHeader_displayName"
                Layout.maximumWidth: root.width - Style.current.xlPadding
                text: root.displayName
                elide: Text.ElideRight
                font {
                    weight: Font.Medium
                    pixelSize: Style.current.primaryTextFontSize
                }
            }

            StatusContactVerificationIcons {
                Layout.alignment: Qt.AlignVCenter
                visible: !root.isCurrentUser
                isContact: root.isContact
                trustIndicator: root.trustStatus
            }

            Loader {
                sourceComponent: SVGImage {
                    objectName: "ProfileHeader_displayNameEditIcon"
                    height: compact ? 10 : 16
                    width: compact ? 10 : 16
                    source: Style.svg("edit-message")
                    MouseArea {
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        acceptedButtons: Qt.LeftButton
                        onClicked: {
                            root.editClicked()
                        }
                    }
                }
                active: root.editButtonVisible
                visible: active
            }
        }

        StyledText {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter
            visible: root.pubkeyVisible
            text: Utils.getElidedCompressedPk(pubkey)
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 13
            color: Style.current.secondaryText
        }

        RowLayout {
            Layout.alignment: Qt.AlignHCenter
            visible: root.pubkeyVisibleWithCopy
            StyledText {
                id: txtChatKey
                text: qsTr("Chatkey:%1...").arg(pubkey.substring(0, 32))
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: Style.current.primaryTextFontSize
                color: Style.current.secondaryText
            }

            CopyToClipBoardButton {
                id: copyBtn
                Layout.preferredWidth: 20
                Layout.preferredHeight: 20
                color: Style.current.transparent
                textToCopy: pubkey
                store: root.store
            }
        }

        EmojiHash {
            id: emojiHash
            Layout.alignment: Qt.AlignHCenter
            visible: root.emojiHashVisible
            compact: root.compact
            publicKey: root.pubkey
        }
    }

    StatusMenu {
        id: imageEditMenu

        StatusAction {
            text: qsTr("Upload a file")
            assetSettings.name: "download"
            assetSettings.rotation: 180
            onTriggered: Global.openChangeProfilePicPopup(editButton.tempIcon)
        }

        StatusAction {
            text: qsTr("Remove image")
            type: StatusAction.Danger
            assetSettings.name: "delete"
            onTriggered: root.icon = ""
        }
    }
}