import QtQuick 2.13

import SortFilterProxyModel 0.2

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

import utils 1.0

import "../controls"

Rectangle {
    id: root

    property var locale
    property var assets: []
    signal tokenSelected(var selectedToken)
    property var searchTokenSymbolByAddressFn: function (address) {
        return ""
    }
    property var getNetworkIcon: function(chainId){}

    QtObject {
        id: d
        property string searchString
        readonly property var updateSearchText: Backpressure.debounce(root, 1000, function(inputText) {
            d.searchString = inputText
        })
    }

    height: visible ? tokenList.height: 0
    color: Theme.palette.indirectColor1
    radius: 8

    StatusListView {
        id: tokenList
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        width: parent.width
        height: Math.min(433, tokenList.contentHeight)

        model: SortFilterProxyModel {
            sourceModel: root.assets
            filters: [
                ExpressionFilter {
                    expression: {
                        var tokenSymbolByAddress = searchTokenSymbolByAddressFn(d.searchString)
                        return visibleForNetwork && (
                            symbol.startsWith(d.searchString.toUpperCase()) || name.toUpperCase().startsWith(d.searchString.toUpperCase()) || (tokenSymbolByAddress!=="" && symbol.startsWith(tokenSymbolByAddress))
                        )
                    }
                }
            ]
        }
        delegate: TokenBalancePerChainDelegate {
            width: ListView.view.width
            locale: root.locale
            getNetworkIcon: root.getNetworkIcon
            onTokenSelected: root.tokenSelected(selectedToken)
        }
        headerPositioning: ListView.OverlayHeader
        header: Rectangle {
            width: parent.width
            height: childrenRect.height
            color: Theme.palette.indirectColor1
            radius: 8
            z: 2
            Column {
                width: parent.width
                Item {
                    height: 5
                    width: parent.width
                }
                StatusInput {
                    height: 50
                    width: parent.width
                    input.showBackground: false
                    placeholderText: qsTr("Search for token or enter token address")
                    input.rightComponent: StatusIcon {
                        icon: "search"
                        height: 17
                        color: Theme.palette.baseColor1
                    }
                    onTextChanged: Qt.callLater(d.updateSearchText, text)
                }
                Rectangle {
                    height: 1
                    width: parent.width
                    color: Theme.palette.baseColor3
                }
            }
        }
    }
}