import QtQuick 2.15
import QtQuick.Controls 2.15

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

import AppLayouts.Wallet.controls 1.0

import utils 1.0

StatusListItem {
    id: root

    // expected roles: name, symbol, currencyPrice, changePct24hour, communityId, communityName, communityImage

    property alias currencyBalance: currencyBalance
    property alias change24HourPercentage: change24HourPercentageText
    property alias currencyPrice: currencyPrice

    property string currentCurrencySymbol
    property string textColor: {
        if (!modelData || !modelData.marketDetails) {
            return Theme.palette.successColor1
        }
        return modelData.marketDetails.changePct24hour === undefined  ?
            Theme.palette.baseColor1 :
            modelData.marketDetails.changePct24hour === 0 ?
                Theme.palette.baseColor1 :
                modelData.marketDetails.changePct24hour < 0 ?
                    Theme.palette.dangerColor1 :
                    Theme.palette.successColor1
    }
        
    property string errorTooltipText_1
    property string errorTooltipText_2

    readonly property bool isCommunityToken: !!modelData && !!modelData.communityId
    readonly property string symbolUrl: {
        if (!modelData)
            return ""
        if (modelData.image)
            return modelData.image
        if (modelData.symbol)
            return Constants.tokenIcon(modelData.symbol, false)
        return ""
    }
    readonly property string upDownTriangle: {
        if (!modelData || !modelData.marketDetails)
            return ""
        if (modelData.marketDetails.changePct24hour < 0)
            return "▾"
        if (modelData.marketDetails.changePct24hour > 0)
            return "▴"
        return ""
    }
    readonly property bool isUndefined: modelData && !modelData.marketDetailsLoading && title === ""

    signal switchToCommunityRequested(string communityId)

    title: modelData ? modelData.name : ""
    subTitle: LocaleUtils.currencyAmountToLocaleString(modelData.enabledNetworkBalance)
    asset.name: symbolUrl
    asset.isImage: true
    asset.width: 32
    asset.height: 32
    errorIcon.tooltip.maxWidth: 300
    height: isUndefined ? 0 : implicitHeight
    visible: !isUndefined

    statusListItemTitleIcons.sourceComponent: StatusFlatRoundButton {
        width: 14
        height: visible ? 14 : 0
        icon.width: 14
        icon.height: 14
        icon.name: "tiny/warning"
        icon.color: Theme.palette.dangerColor1
        tooltip.text: root.errorTooltipText_1
        tooltip.maxWidth: 300
        visible: !!tooltip.text
    }

    components: [
        Column {
            anchors.verticalCenter: parent.verticalCenter
            StatusFlatRoundButton {
                id: errorIcon
                width: 14
                height: visible ? 14 : 0
                icon.width: 14
                icon.height: 14
                icon.name: "tiny/warning"
                icon.color: Theme.palette.dangerColor1
                tooltip.text: root.errorTooltipText_2
                tooltip.maxWidth: 200
                visible: !!tooltip.text
            }
            StatusTextWithLoadingState   {
                id: currencyBalance
                anchors.right: parent.right
                loading: modelData && modelData.marketDetailsLoading
                visible: !errorIcon.visible && !root.isCommunityToken
            }
            Row {
                anchors.right: parent.right
                spacing: 6
                visible: !errorIcon.visible && !root.isCommunityToken
                StatusTextWithLoadingState {
                    id: change24HourPercentageText
                    anchors.verticalCenter: parent.verticalCenter
                    customColor: root.textColor
                    font.pixelSize: 13
                    loading: modelData && modelData.marketDetailsLoading
                    text: modelData && modelData.marketDetails && modelData.marketDetails.changePct24hour !== undefined ? "%1 %2%".arg(root.upDownTriangle).arg(LocaleUtils.numberToLocaleString(modelData.marketDetails.changePct24hour, 2))
                                                                                                                        : "---"
                }
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: 1
                    height: 12
                    color: Theme.palette.directColor9
                }
                StatusTextWithLoadingState {
                    id: currencyPrice
                    anchors.verticalCenter: parent.verticalCenter
                    customColor: root.textColor
                    font.pixelSize: 13
                    loading: modelData && modelData.marketDetailsLoading
                    text: modelData && modelData.marketDetails ? LocaleUtils.currencyAmountToLocaleString(modelData.marketDetails.currencyPrice) : ""
                }
            }
            ManageTokensCommunityTag {
                anchors.right: parent.right
                communityImage: !!modelData ? modelData.communityImage : ""
                communityName: !!modelData && !!modelData.communityName ? modelData.communityName: ""
                communityId: !!modelData && !!modelData.communityId ? modelData.communityId : ""
                asset.letterSize: 12
                visible: root.isCommunityToken
                
                TapHandler {
                    acceptedButtons: Qt.LeftButton
                    onSingleTapped: root.switchToCommunityRequested(modelData.communityId)
                }
            }
        }
    ]

    states: [
        State {
            name: "unknownToken"
            when: !root.symbolUrl
            PropertyChanges {
                target: root.asset
                isLetterIdenticon: true
                color: Theme.palette.miscColor5
                name: !!modelData && modelData.symbol ? modelData.symbol : ""
            }
        }
    ]
}