import QtQuick 2.15

import StatusQ 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils

import AppLayouts.Wallet 1.0

import utils 1.0

StatusListItem {
    id: root

    property bool clearVisible: false

    required property string name
    required property string address
    required property string chainShortNames
    required property string emoji
    required property string walletColor
    required property var currencyBalance
    required property string walletType
    required property bool migratedToKeycard
    /*
        formattedBalance    [string] - formatted balance e.g. "1234.56B"
        balance             [string] - balance e.g. "123456000000"
        iconUrl             [string] - icon url e.g. "network/Network=Hermez"
        chainColor          [string] - chain color e.g. "#FF0000"
    */
    property var accountBalance: null

    signal cleared()

    objectName: root.name

    height: visible ? 64 : 0
    title: root.name
    subTitle:{
        if(!!root.address) {
            let elidedAddress = StatusQUtils.Utils.elideText(root.address,6,4)
            return sensor.containsMouse ? root.chainShortNames ||  Utils.richColorText(elidedAddress, Theme.palette.directColor1) : elidedAddress
        }
        return ""
    }
    statusListItemSubTitle.wrapMode: Text.NoWrap
    asset.emoji: root.emoji
    asset.color: root.walletColor
    asset.name: root.emoji ? "filled-account": ""
    asset.letterSize: 14
    asset.isLetterIdenticon: !!root.emoji
    asset.bgColor: Theme.palette.indirectColor1
    asset.width: 40
    asset.height: 40
    radius: 0
    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
    components: [
        Column {
            anchors.verticalCenter: parent.verticalCenter
            StatusTextWithLoadingState   {
                objectName: "walletAccountCurrencyBalance"
                anchors.right: parent.right
                font.pixelSize: 15
                text: !!root.currencyBalance ? LocaleUtils.currencyAmountToLocaleString(root.currencyBalance) : ""
            }
            StatusIcon {
                objectName: "walletAccountTypeIcon"
                anchors.right: parent.right
                width: !!icon ? 15: 0
                height: !!icon ? 15 : 0
                color: Theme.palette.directColor1
                icon: root.walletType === Constants.watchWalletType ? "show" :
                                    root.migratedToKeycard ? "keycard" : ""
            }
        },
        StatusClearButton {
            anchors.verticalCenter: parent.verticalCenter
            visible: root.clearVisible
            onClicked: root.cleared()
        }
    ]

    inlineTagModel: !!root.accountBalance && !!root.accountBalance.formattedBalance ? 1 : 0
    inlineTagDelegate: StatusListItemTag {
        objectName: "inlineTagDelegate_" +  index
        background: null
        height: 16
        asset.height: 16
        asset.width: 16
        title: root.accountBalance.formattedBalance
        titleText.font.pixelSize: 12
        titleText.color: root.accountBalance.balance === "0" ? Theme.palette.baseColor1 : Theme.palette.directColor1
        asset.isImage: true
        asset.name: Style.svg("tiny/%1".arg(root.accountBalance.iconUrl))
        asset.color: root.accountBalance.chainColor
        closeButtonVisible: false
        hoverEnabled: true
        tagClickable: true
        onTagClicked: root.clicked(root.itemId, mouse)
        onClicked: root.clicked(root.itemId, mouse)
    }
}