status-desktop/ui/imports/shared/views/AmountToSend.qml

import QtQuick 2.13
import QtQuick.Layouts 1.13

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls.Validators 0.1

import "../controls"

import utils 1.0

ColumnLayout {
    id: root

    property alias input: topAmountToSendInput

    property var selectedAsset
    property bool isBridgeTx: false
    property bool interactive: false
    property var maxFiatBalance
    property bool inputIsFiat: false
    property var cryptoValueToSend
    Binding {
        target: root
        property: "cryptoValueToSend"
        value: {
            const value = !inputIsFiat ? getCryptoCurrencyAmount(LocaleUtils.numberFromLocaleString(topAmountToSendInput.text)) : getCryptoValue(fiatValueToSend ? fiatValueToSend.amount : 0.0)
            return root.selectedAsset, value
        }
        delayed: true
    }
    property var fiatValueToSend
    Binding {
        target: root
        property: "fiatValueToSend"
        value: {
            const value = inputIsFiat ? getFiatCurrencyAmount(LocaleUtils.numberFromLocaleString(topAmountToSendInput.text)) : getFiatValue(cryptoValueToSend ? cryptoValueToSend.amount : 0.0)
            return root.selectedAsset, value
        }
        delayed: true
    }
    property string currentCurrency
    property var getFiatValue: function(cryptoValue) {}
    property var getCryptoValue: function(fiatValue) {}
    property var getFiatCurrencyAmount: function(fiatValue) {}
    property var getCryptoCurrencyAmount: function(cryptoValue) {}

    signal reCalculateSuggestedRoute()

    QtObject {
        id: d
        readonly property string zeroString: LocaleUtils.numberToLocaleString(0, 2)
        property Timer waitTimer: Timer {
            interval: 1000
            onTriggered: reCalculateSuggestedRoute()
        }

        function formatValue(value) {
            if (!value) {
                return zeroString
            }
            return LocaleUtils.currencyAmountToLocaleString(value)
        }
    }

    onMaxFiatBalanceChanged: {
        floatValidator.top = maxFiatBalance ? maxFiatBalance.amount : 0.0
        input.validate()
    }

    StatusBaseText {
        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
        text: root.isBridgeTx ? qsTr("Amount to bridge") : qsTr("Amount to send")
        font.pixelSize: 13
        lineHeight: 18
        lineHeightMode: Text.FixedHeight
        color: Theme.palette.directColor1
    }
    RowLayout {
        id: topItem
        property var topAmountToSend: !inputIsFiat ? cryptoValueToSend : fiatValueToSend
        Layout.alignment: Qt.AlignLeft
        AmountInputWithCursor {
            id: topAmountToSendInput
            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
            Layout.maximumWidth: 163
            Layout.preferredWidth: (!!text) ? input.edit.paintedWidth : textMetrics.advanceWidth
            placeholderText: d.zeroString
            input.edit.color: input.valid ? Theme.palette.directColor1 : Theme.palette.dangerColor1
            input.edit.readOnly: !root.interactive
            validators: [
                StatusFloatValidator {
                    id: floatValidator
                    bottom: 0
                    top: root.maxFiatBalance.amount
                    errorMessage: ""
                }
            ]
            TextMetrics {
                id: textMetrics
                text: topAmountToSendInput.placeholderText
                font: topAmountToSendInput.input.placeholder.font
            }
            Keys.onReleased: {
                const amount = topAmountToSendInput.text.trim()
                if (!Utils.containsOnlyDigits(amount) || isNaN(amount)) {
                    return
                }
                d.waitTimer.restart()
            }
        }
    }
    Item {
        id: bottomItem
        property var bottomAmountToSend: inputIsFiat ? cryptoValueToSend : fiatValueToSend
        Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
        Layout.preferredWidth: txtBottom.width
        Layout.preferredHeight: txtBottom.height
        StatusBaseText {
            id: txtBottom
            anchors.top: parent.top
            anchors.left: parent.left
            text: d.formatValue(bottomItem.bottomAmountToSend)
            font.pixelSize: 13
            color: Theme.palette.directColor5
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: {
                topAmountToSendInput.validate()
                if(!!topAmountToSendInput.text) {
                    topAmountToSendInput.text = LocaleUtils.currencyAmountToLocaleString(bottomItem.bottomAmountToSend, {onlyAmount: true})
                }
                inputIsFiat = !inputIsFiat
                d.waitTimer.restart()
            }
        }
    }
}