import QtQuick;
import QtQuick.Controls as QQC2
import "../../mobile" as Mobile
import "../../Flowee" as Flowee
import Flowee.org.pay

Flickable {
    id: root
    implicitWidth: 100
    implicitHeight: 100
    boundsBehavior: Flickable.StopAtBounds
    contentWidth: width
    contentHeight: layouter.height

    Flow {
        id: layouter
        anchors.fill: parent
        spacing: 10
        property int itemSize: {
            let w = root.width
            if (w < 210) {
                if (model.length > 2)
                    return 120
                return 160
            }
            if (model.length > 4)
                return 120
            return 160
        }

        Repeater {
            model: tokens.tradableTokens

            Rectangle {
                width: layouter.itemSize
                height: name.height + balanceLabel.height + 26 + (icon.visible ? icon.height : 0)
                property QtObject md: metadata.identity(modelData.category)
                property QtObject token: md.token
                onTokenChanged: if (token) modelData.decimals = token.decimals
                radius: 10
                border.width: 1.2
                border.color: palette.midlight
                color: "#00000000"
                clip: true

                Flowee.Label {
                    id: name
                    y: 10
                    x: 6
                    text: md.name
                    width: parent.width - 12
                    horizontalAlignment: Text.AlignHCenter
                    fontSizeMode: Text.HorizontalFit
                    font.pixelSize: balanceLabel.font.pixelSize * 1.2
                }
                Flowee.Label {
                    id: balanceLabel
                    text: modelData.balance
                    anchors.top: name.bottom
                    anchors.topMargin: 6
                    x: 10
                }
                Flowee.Label {
                    anchors.left: balanceLabel.right
                    anchors.leftMargin: 6
                    anchors.baseline: balanceLabel.baseline
                    font.pixelSize: balanceLabel.font.pixelSize * 0.8
                    text: token == null ? "--" : token.symbol
                }

                Image {
                    id: icon
                    source: md.iconPath
                    visible: source !== ""
                    width: 50
                    height: 50
                    smooth: true
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 10
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
        }
    }
}