status-desktop/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

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

import AppLayouts.Wallet.panels 1.0

import utils 1.0

Control {
    id: root

    /** Expected model structure: see TokenSelectorPanel::assetsModel **/
    property alias assetsModel: tokenSelectorPanel.assetsModel

    /** Expected model structure: see TokenSelectorPanel::collectiblesModel **/
    property alias collectiblesModel: tokenSelectorPanel.collectiblesModel

    signal assetSelected(string key)
    signal collectionSelected(string key)
    signal collectibleSelected(string key)

    // Index of the current tab, indexes ​​correspond to the
    // TokensSelectorPanel.Tabs enum values.
    property alias currentTab: tokenSelectorPanel.currentTab

    function setCustom(name: string, icon: url, key: string) {
        d.isTokenSelected = true
        d.currentName = name
        d.currentIcon = icon
        tokenSelectorPanel.highlightedKey = key ?? ""
    }

    padding: 10

    QtObject {
        id: d

        property bool isTokenSelected: false

        property string currentName
        property url currentIcon
    }

    background: StatusComboboxBackground {
        border.width: 0
        color: {
            if (d.isTokenSelected)
                return "transparent"

            return root.hovered || dropdown.opened
                    ? Theme.palette.primaryColor2
                    : Theme.palette.primaryColor3
        }
    }

    contentItem: Loader {
        sourceComponent: d.isTokenSelected ? selectedContent
                                           : notSelectedContent
    }

    Component {
        id: notSelectedContent

        RowLayout {
            spacing: 10

            StatusBaseText {
                objectName: "tokenSelectorContentItemText"
                font.pixelSize: root.font.pixelSize
                font.weight: Font.Medium
                color: Theme.palette.primaryColor1
                text: qsTr("Select token")
            }

            StatusComboboxIndicator {
                color: Theme.palette.primaryColor1
            }
        }
    }

    Component {
        id: selectedContent

        RowLayout {
            spacing: Style.current.halfPadding

            StatusRoundedImage {
                objectName: "tokenSelectorIcon"
                Layout.preferredWidth: 20
                Layout.preferredHeight: 20
                image.source: d.currentIcon
            }

            StatusBaseText {
                objectName: "tokenSelectorContentItemText"
                font.pixelSize: 28
                color: root.hovered ? Theme.palette.blue : Theme.palette.darkBlue

                text: d.currentName
            }

            StatusComboboxIndicator {
                color: Theme.palette.primaryColor1
            }
        }
    }

    StatusDropdown {
        id: dropdown

        y: parent.height + 4

        closePolicy: Popup.CloseOnPressOutsideParent
        bottomPadding: 0

        contentItem: TokenSelectorPanel {
            id: tokenSelectorPanel

            function findSubitem(key) {
                const count = collectiblesModel.rowCount()

                for (let i = 0; i < count; i++) {
                    const entry = ModelUtils.get(collectiblesModel, i)
                    const subitem = ModelUtils.getByKey(
                                      entry.subitems, "key", key)
                    if (subitem)
                        return subitem
                }
            }

            function setCurrentAndClose(name, icon) {
                d.currentName = name
                d.currentIcon = icon
                d.isTokenSelected = true
                dropdown.close()
            }

            onAssetSelected: {
                const entry = ModelUtils.getByKey(assetsModel, "tokensKey", key)
                highlightedKey = key

                setCurrentAndClose(entry.symbol,
                                   Constants.tokenIcon(entry.symbol))
                root.assetSelected(key)
            }

            onCollectibleSelected: {
                highlightedKey = key

                const subitem = findSubitem(key)
                setCurrentAndClose(subitem.name, subitem.icon)

                root.collectibleSelected(key)
            }

            onCollectionSelected: {
                highlightedKey = key

                const subitem = findSubitem(key)
                setCurrentAndClose(subitem.name, subitem.icon)

                root.collectionSelected(key)
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
    }
}