status-desktop/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3

import utils 1.0
import shared.controls 1.0 as SharedControls
import shared.stores 1.0
import shared.popups.send 1.0

import AppLayouts.Wallet 1.0

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

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

Item {
    id: root

    property var savedAddressesModel
    property var myAccountsModel
    property var recentRecipientsModel

    readonly property bool recentRecipientsTabVisible: recipientTypeTabBar.currentIndex === 2 // Recent tab

    // This should only pass a `key` role to identify the object but not necessary to pass the complete object structure
    // TODO issue: #15492
    signal recipientSelected(var recipient, int type)
    signal recentRecipientsTabSelected

    enum Type {
        Address,
        Account,
        SavedAddress,
        RecentsAddress,
        None
    }

    StatusTabBar {
        id: recipientTypeTabBar
        objectName: "recipientTypeTabBar"

        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width

        StatusTabButton {
            width: implicitWidth
            objectName: "savedAddressesTab"
            text: qsTr("Saved")
        }
        StatusTabButton {
            width: implicitWidth
            objectName: "myAccountsTab"
            text: qsTr("My Accounts")
        }
        StatusTabButton {
            width: implicitWidth
            objectName: "recentAddressesTab"
            text: qsTr("Recent")
        }
    }

    // To-do adapt to new design and make block white/black once the list items etc support new color scheme
    Rectangle {
        anchors.top: recipientTypeTabBar.bottom
        anchors.topMargin: -5
        height: parent.height - recipientTypeTabBar.height
        width: parent.width
        color: Theme.palette.indirectColor1
        radius: 8

        StackLayout {
            currentIndex: recipientTypeTabBar.currentIndex
            anchors.fill: parent

            StatusListView {
                id: savedAddresses
                objectName: "savedAddressesList"

                model: root.savedAddressesModel
                header: savedAddresses.count > 0 ? search : nothingInList
                headerPositioning: ListView.OverlayHeader
                delegate: SavedAddressListItem {
                    implicitWidth: ListView.view.width
                    modelData: model
                    visible: !savedAddresses.headerItem.text || name.toLowerCase().includes(savedAddresses.headerItem.text)
                    // This should only pass a `key` role to identify the saved addresses object but not necessary to pass the complete object structure
                    // TODO issue: #15492
                    onClicked: recipientSelected(modelData, Helpers.RecipientAddressObjectType.SavedAddress)
                }
                Component {
                    id: search
                    SearchBoxWithRightIcon {
                        width: parent.width
                        placeholderText: qsTr("Search for saved address")
                        z: 2
                    }
                }
                Component {
                    id: nothingInList
                    StatusBaseText {
                        width: savedAddresses.width
                        height: visible ? 56 : 0
                        font.pixelSize: 15
                        color: Theme.palette.directColor1
                        text: qsTr("No Saved Address")
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }

            StatusListView {
                id: myAccounts
                objectName: "myAccountsList"

                delegate: SharedControls.WalletAccountListItem {
                    required property var model

                    implicitWidth: ListView.view.width
                    name: model.name
                    address: model.address

                    emoji: model.emoji
                    walletColor: Utils.getColorForId(model.colorId)
                    currencyBalance: model.currencyBalance
                    walletType: model.walletType
                    migratedToKeycard: model.migratedToKeycard ?? false
                    accountBalance: model.accountBalance ?? null
                    chainShortNames: model.colorizedChainShortNames ?? ""
                    // This should only pass a `key` role to identify the accounts object but not necessary to pass the complete object structure
                    // TODO issue: #15492
                    onClicked: recipientSelected({name: model.name,
                                                     address: model.address,
                                                     color: model.color,
                                                     colorId: model.colorId,
                                                     emoji: model.emoji,
                                                     walletType: model.walletType,
                                                     currencyBalance: model.currencyBalance,
                                                     preferredSharingChainIds: model.preferredSharingChainIds,
                                                     migratedToKeycard: model.migratedToKeycard
                                                 },
                                                 Helpers.RecipientAddressObjectType.Account)

                    }

                model: root.myAccountsModel
            }

            StatusListView {
                id: recents
                objectName: "recentReceiversList"

                header: StatusBaseText {
                    height: visible ? 56 : 0
                    width: recents.width
                    font.pixelSize: 15
                    color: Theme.palette.directColor1
                    text: qsTr("No Recents")
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    visible: recents.count <= 0
                }

                delegate: StatusListItem {
                    id: listItem

                    property var entry: activityEntry
                    property bool isIncoming: entry.txType === Constants.TransactionType.Receive

                    implicitWidth: ListView.view.width
                    height: visible ? 64 : 0
                    title: isIncoming ? StatusQUtils.Utils.elideText(entry.sender,6,4) : StatusQUtils.Utils.elideText(entry.recipient,6,4)
                    subTitle: LocaleUtils.getTimeDifference(new Date(parseInt(entry.timestamp) * 1000), new Date())
                    statusListItemTitle.elide: Text.ElideMiddle
                    statusListItemTitle.wrapMode: Text.NoWrap
                    radius: 0
                    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
                    statusListItemComponentsSlot.spacing: 5
                    components: [
                        StatusIcon {
                            id: transferIcon
                            height: 15
                            width: 15
                            color: listItem.isIncoming ? Style.current.success : Style.current.danger
                            icon: listItem.isIncoming ? "arrow-down" : "arrow-up"
                            rotation: 45
                        },
                        StatusTextWithLoadingState {
                            font.pixelSize: 15
                            customColor: Theme.palette.directColor1
                            text: LocaleUtils.currencyAmountToLocaleString(entry.amountCurrency)
                        }
                    ]
                    // This should only pass a `key` role to identify the recent activity object but not necessary to pass the complete object structure
                    // TODO issue: #15492
                    onClicked: recipientSelected(entry, Helpers.RecipientAddressObjectType.RecentsAddress)
                }

                model: root.recentRecipientsModel

                onVisibleChanged: {
                    if (visible) {
                        root.recentRecipientsTabSelected()
                    }
                }
            }
        }
    }
}