status-desktop/ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import StatusQ.Core 0.1

import QtGraphicalEffects 1.15

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

import shared.controls.chat 1.0

import utils 1.0

CalloutCard {
    id: root

    required property string amount
    required property string symbol
    required property string address

    required property bool areTestNetworksEnabled

    property string senderName
    property string senderThumbnailImage
    property int senderColorId

    property bool highlight: false

    signal clicked(var mouse)

    implicitHeight: 187
    implicitWidth: 305 + 2 * borderWidth
    borderWidth: 2
    hoverEnabled: true
    dropShadow: d.highlight
    borderColor: d.highlight ? Theme.palette.background : Theme.palette.border

    padding: 12

    Behavior on borderColor {
        ColorAnimation { duration: 200 }
    }

    QtObject {
        id: d
        readonly property bool highlight: (root.highlight || root.hovered) && isAvailable
        readonly property bool isAvailable: !root.areTestNetworksEnabled
    }

    contentItem: ColumnLayout {
        spacing: 4
        Rectangle {
            Layout.fillHeight: true
            Layout.fillWidth: true
            radius: 8
            color: Theme.palette.primaryColor3
            clip: true
            border.width: 1
            border.color: Theme.palette.primaryColor2

            StatusImage {
                anchors.fill: parent
                asynchronous: true
                source: Theme.png("chat/request_payment_banner")
            }

            Row {
                id: iconRow
                spacing: -8
                anchors.centerIn: parent
                StatusRoundedImage {
                    id: symbolImage
                    anchors.verticalCenter: parent.verticalCenter
                    image.source: Constants.tokenIcon(root.symbol)
                    width: 44
                    height: width
                    image.layer.enabled: true
                    image.layer.effect: OpacityMask {
                        id: mask
                        invert: true

                        maskSource: Item {
                            width: mask.width + 2
                            height: mask.height + 2

                            Rectangle {
                                anchors.centerIn: parent
                                anchors.horizontalCenterOffset: symbolImage.width + iconRow.spacing - 2

                                width: parent.width
                                height: width
                                radius: width / 2
                            }
                        }
                    }
                }

                StatusSmartIdenticon {
                    width: symbolImage.width
                    height: symbolImage.height
                    asset.width: symbolImage.width
                    asset.height: symbolImage.height
                    asset.isImage: !!root.senderThumbnailImage
                    asset.name: root.senderThumbnailImage
                    asset.isLetterIdenticon: root.senderThumbnailImage === ""
                    asset.color: Theme.palette.userCustomizationColors[root.senderColorId]
                    asset.charactersLen: 2
                    name: root.senderName
                }
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 4
        }

        StatusBaseText {
            Layout.fillWidth: true
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            text: qsTr("Send %1 %2 to %3").arg(root.amount).arg(root.symbol).arg(Utils.compactAddress(root.address.toLowerCase(), 4))
            font.pixelSize: Theme.additionalTextSize
            font.weight: Font.Medium
        }
        StatusBaseText {
            Layout.fillWidth: true
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            font.pixelSize: Theme.tertiaryTextFontSize
            color: Theme.palette.baseColor1
            verticalAlignment: Text.AlignVCenter
            text: qsTr("Requested by %1").arg(root.senderName)
        }
    }

    StatusToolTip {
        text: qsTr("Not available in the testnet mode")
        visible: !d.isAvailable && root.hovered
        y: -height
    }

    MouseArea {
        id: ma
        anchors.fill: root
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            if (!d.isAvailable)
                return
            root.clicked(mouse)
        }
    }
}