import QtQuick 2.13
import QtQuick.Layouts 1.3

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

import utils 1.0
import shared 1.0

StatusListItem {
    id: root

    property var modelData
    property string symbol
    property bool isIncoming
    property int transferStatus
    property var cryptoValue
    property var fiatValue
    property string networkIcon
    property string networkColor
    property string networkName
    property string shortTimeStamp
    property string savedAddressName

    state: "normal"
    asset.isImage: true
    asset.name: root.symbol ? Style.png("tokens/%1".arg(root.symbol)) : ""
    title: modelData !== undefined && !!modelData ?
               isIncoming ? qsTr("Receive %1").arg(root.symbol) : !!savedAddressName ?
                            qsTr("Send %1 to %2").arg(root.symbol).arg(savedAddressName) :
                            qsTr("Send %1 to %2").arg(root.symbol).arg(Utils.compactAddress(modelData.to, 4)): ""
    subTitle: shortTimeStamp
    inlineTagModel: 1
    inlineTagDelegate: InformationTag {
        tagPrimaryLabel.text: networkName
        tagPrimaryLabel.color: networkColor
        image.source: !!networkIcon ? Style.svg("tiny/%1".arg(networkIcon)) : ""
        background: Rectangle {
            id: controlBackground
            implicitWidth: 51
            implicitHeight: 24
            color: "transparent"
            border.width: 1
            border.color: Theme.palette.baseColor2
            radius: 36
        }
        rightComponent: transferStatus === Constants.TransactionStatus.Success ? completedIcon : loadingIndicator
    }
    components: [
        ColumnLayout {
            Row {
                Layout.alignment: Qt.AlignRight
                spacing: 4
                StatusIcon {
                    color: isIncoming ? Theme.palette.successColor1 : Theme.palette.dangerColor1
                    icon: "arrow-up"
                    rotation: isIncoming ? 135 : 45
                    height: 18
                }
                StatusBaseText {
                    id: cryptoValueText
                    text: LocaleUtils.currencyAmountToLocaleString(cryptoValue)
                    color: Theme.palette.directColor1
                }
            }
            StatusBaseText {
                Layout.alignment: Qt.AlignRight
                text: LocaleUtils.currencyAmountToLocaleString(fiatValue)
                font.pixelSize: 15
                color: Theme.palette.baseColor1
            }
        }
    ]

    Component {
        id: loadingIndicator
        StatusLoadingIndicator {
            height: 10
            width: 10
        }
    }

    Component {
        id: completedIcon
        StatusIcon {
            visible: icon !== ""
            icon: "checkmark"
            color: Theme.palette.baseColor1
            width: 10
            height: 10
        }
    }

    states: [
        State {
            name: "normal"
            PropertyChanges {
                target: asset
                width: 40
                height: 40
            }
            PropertyChanges {
                target: statusListItemTitle
                font.weight: Font.Medium
                font.pixelSize: 15
            }
            PropertyChanges {
                target: cryptoValueText
                font.pixelSize: 15
            }
        },
        State {
            name: "big"
            PropertyChanges {
                target: asset
                width: 50
                height: 50
            }
            PropertyChanges {
                target: statusListItemTitle
                font.weight: Font.Bold
                font.pixelSize: 17
            }
            PropertyChanges {
                target: cryptoValueText
                font.pixelSize: 17
            }
        }
    ]
}