status-desktop/ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml

import QtQuick 2.15
import QtQuick.Layouts 1.15

import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1

import AppLayouts.Wallet.controls 1.0

import utils 1.0

RowLayout {
    id: root

    /**
    Expected model structure:
    - tokensKey: unique string ID of the token (asset); e.g. "ETH" or contract address
    - name: user visible token name (e.g. "Ethereum")
    - symbol: user visible token symbol (e.g. "ETH")
    - decimals: number of decimal places
    - communityId:optional; ID of the community this token belongs to, if any
    - marketDetails: object containing props like `currencyPrice` for the computed values below
    - balances: submodel[ chainId:int, account:string, balance:BigIntString, iconUrl:string ]
    - currentBalance: amount of tokens
    - currencyBalance: e.g. `1000.42` in user's fiat currency
    - currencyBalanceAsString: e.g. "1 000,42 CZK" formatted as a string according to the user's locale
    - balanceAsString: `1.42` formatted as e.g. "1,42" in user's locale
    - iconSource: string
    **/
    required property var assetsModel
    /**
    Expected model structure:
    - groupName: group name (from collection or community name)
    - icon: from imageUrl or mediaUrl
    - type: can be "community" or "other"
    - subitems: submodel of collectibles/collections of the group
    - key: key of collection (community type) or collectible (other type)
    - name: name of the subitem (of collectible or collection)
    - balance: balance of collection (in case of community collectibles)
               or collectible (in case of ERC-1155)
    - icon: icon of the subitem
    **/
    required property var collectiblesModel
    /**
    Expected model structure:
    - chainId: network chain id
    - chainName: name of network
    - iconUrl: network icon url
    **/
    required property var networksModel

    /** input property holds header is being scrolled **/
    property bool isScrolling

    /** input property holds if the header is the sticky header **/
    property bool isStickyHeader

    /** input property for programatic selection of network **/
    property int selectedChainId

    /** input property for programatic selection of token
    (asset/collectible/collection) **/
    property string selectedTokenKey

    /** signal to propagate that an asset was selected **/
    signal assetSelected(string key)
    /** signal to propagate that a collection was selected **/
    signal collectionSelected(string key)
    /** signal to propagate that a collectible was selected **/
    signal collectibleSelected(string key)
    /** signal to propagate that a network was selected **/
    signal networkSelected(string chainId)

    QtObject {
        id: d
        readonly property bool selectedTokenNotAvailableOnAssetsOrCollectiblesList: !selectedAssetEntry.available && !selectedCollectibleEntry.available
        onSelectedTokenNotAvailableOnAssetsOrCollectiblesListChanged: {
            if(selectedTokenNotAvailableOnAssetsOrCollectiblesList) {
                // reset token selector in case selected tokens doesnt exist in either models
                tokenSelector.setSelection("", "", "")
            }
        }

        function updateAssetInTokenSelector(available, item) {
            if(available) {
                tokenSelector.setSelection(item.symbol,
                                           Constants.tokenIcon(item.symbol),
                                           item.tokensKey)
            }
        }

        function updateCollectibleInTokenSelector(available, item) {
            if(available) {
                const id = item.communityId ? item.collectionUid : item.uid
                tokenSelector.setSelection(item.name,
                                           item.imageUrl || item.mediaUrl,
                                           id)
            }
        }
    }

    implicitHeight: sendModalTitleText.height

    spacing: 8

    // if not closed during scrolling they move with the header and it feels undesirable
    onIsScrollingChanged: {
        tokenSelector.popup.close()
        networkFilter.control.popup.close()
    }

    StatusBaseText {
        id: sendModalTitleText

        Layout.preferredWidth: contentWidth

        lineHeightMode: Text.FixedHeight
        lineHeight: root.isStickyHeader ? 30 : 38
        font.pixelSize: root.isStickyHeader ? 22 : 28
        elide: Text.ElideRight

        text: qsTr("Send")
    }

    TokenSelector {
        id: tokenSelector

        Layout.fillWidth: true
        Layout.maximumWidth: implicitWidth

        size: root.isStickyHeader ?
                  TokenSelectorButton.Size.Small:
                  TokenSelectorButton.Size.Normal

        assetsModel: root.assetsModel
        collectiblesModel: root.collectiblesModel

        onCollectibleSelected: root.collectibleSelected(key)
        onCollectionSelected: root.collectionSelected(key)
        onAssetSelected: root.assetSelected(key)
    }

    // Horizontal spacer
    RowLayout {}

    StatusBaseText {
        Layout.alignment: Qt.AlignRight

        text: qsTr("On:")
        color: Theme.palette.baseColor1
        font.pixelSize: 13
        lineHeight: 38
        lineHeightMode: Text.FixedHeight
        verticalAlignment: Text.AlignVCenter

        visible: networkFilter.visible
    }

    NetworkFilter {
        id: networkFilter

        Layout.alignment: Qt.AlignTop

        control.bottomPadding: 0

        flatNetworks: root.networksModel

        multiSelection: false
        showSelectionIndicator: false
        showTitle: false

        Binding on selection {
            value: [root.selectedChainId]
            when: root.selectedChainId !== 0
        }
        onSelectionChanged: {
            if (root.selectedChainId !== selection[0]) {
                root.networkSelected(selection[0])
            }
        }

        onToggleNetwork: root.networkSelected(chainId)
    }

    ModelEntry {
        id: selectedAssetEntry
        sourceModel: root.assetsModel
        key: "tokensKey"
        value: root.selectedTokenKey
        onAvailableChanged: d.updateAssetInTokenSelector(available, item)
        onItemChanged: d.updateAssetInTokenSelector(available, item)
    }

    ModelEntry {
        id: selectedCollectibleEntry
        sourceModel: root.collectiblesModel
        key: "symbol"
        value: root.selectedTokenKey
        onAvailableChanged: d.updateCollectibleInTokenSelector(available, item)
        onItemChanged: d.updateCollectibleInTokenSelector(available, item)
    }
}