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

Rectangle {
    id: root
    color: palette.base
    border.width: 1
    border.color: palette.midlight
    radius: 10

    property QtObject md: metadata.identity(modelData.category)
    property QtObject token: md.token
    property QtObject nft: token.nftById(modelData.nftId)

    /*
     * NFTs of the visual kind typically have an image or icon.
     * We don't want to auto download data just because the token tab is open.
     * Because this means that just sending a transaction to a known address on
     * chain may cause the wallet to download stuff. Let alone display something
     * that may be offensive or simply an advertisement.
     *
     * As such the download should be user initiated.
     */
    Item {
        anchors.fill: parent
        anchors.margins: 4
        Image {
            source: {
                var n = root.nft;
                if (n == null)
                    return ""
                return n.iconPath
            }
            anchors.fill: parent
            anchors.bottomMargin: title.height
            fillMode: Image.PreserveAspectCrop
        }

        Flowee.Label {
            id: title
            anchors.bottom: parent.bottom
            text: root.nft.name
            width: parent.width - 20
            horizontalAlignment: Text.AlignHCenter
            elide: Text.ElideRight
        }

        QQC2.Button {
            text: "fetch"
            onClicked: root.nft.downloadIcon()
            visible: root.nft.iconPath === ""
        }
    }
}