import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13

import utils 1.0

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

import "../controls"

RowLayout {
    id: root

    property var store
    property int minReceiveCryptoDecimals: 0
    property bool isLoading: false
    property bool isBridgeTx: false
    property bool isCollectiblesTransfer: false
    property var fromNetworksList
    property var suggestedToNetworksList
    property var weiToEth: function(wei) {}
    property var formatCurrencyAmount: function () {}
    property var reCalculateSuggestedRoute: function() {}
    property bool errorMode: false
    property int errorType: Constants.NoError
    property string selectedSymbol

    property bool showBetaTag: false

    spacing: 10

    StatusRoundIcon {
        Layout.alignment: Qt.AlignTop
        radius: 8
        asset.name: "flash"
        asset.color: Theme.palette.directColor1
    }
    ColumnLayout {
        Layout.alignment: Qt.AlignTop
        Layout.preferredWidth: root.width
        spacing: 4
        Row {
            Layout.maximumWidth: parent.width
            spacing: 8

            StatusBaseText {
                font.pixelSize: 15
                font.weight: Font.Medium
                color: Theme.palette.directColor1
                text: qsTr("Networks")
                wrapMode: Text.WordWrap
            }

            StatusBetaTag {
                visible: root.showBetaTag
            }
        }
        StatusBaseText {
            Layout.maximumWidth: parent.width
            font.pixelSize: 15
            color: Theme.palette.baseColor1
            text: isBridgeTx ? qsTr("Routes will be automatically calculated to give you the lowest cost.") :
                               qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.")
            wrapMode: Text.WordWrap
        }

        Column {
            Layout.fillWidth: true
            Layout.topMargin: Style.current.smallPadding
            Layout.bottomMargin: Style.current.smallPadding
            spacing: Style.current.halfPadding
            visible: root.isBridgeTx ? true : !root.isLoading ? root.errorType === Constants.NoError : false

            // TODO: This transformation should come from an adaptor outside this component
            LeftJoinModel {
                id: toNetworksListLeftJoinModel

                leftModel: root.suggestedToNetworksList
                rightModel: root.store.flatNetworksModel
                joinRole: "chainId"
            }

            Repeater {
                id: repeater
                objectName: "networksList"
                model: isBridgeTx ? root.fromNetworksList : toNetworksListLeftJoinModel
                delegate: isBridgeTx ? networkItem : routeItem
            }
        }

        BalanceExceeded {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter
            Layout.topMargin: Style.current.smallPadding
            errorType: root.errorType
            isLoading: root.isLoading && !root.isBridgeTx
        }
    }

    ButtonGroup {
        buttons: repeater.children
    }

    Component {
        id: routeItem
        StatusListItem {
            objectName: model.chainName
            leftPadding: 5
            rightPadding: 5
            implicitWidth: 410
            title: model.chainName
            subTitle: {
                if(root.isCollectiblesTransfer)
                    return ""
                let amountOut = root.weiToEth(model.amountOut)
                return root.formatCurrencyAmount(amountOut, root.selectedSymbol, {"minDecimals": root.minReceiveCryptoDecimals})
            }
            statusListItemSubTitle.color: root.errorMode ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
            asset.width: 32
            asset.height: 32
            asset.name: Style.svg("tiny/" + model.iconUrl)
            asset.isImage: true
            color: "transparent"
        }
    }

    Component {
        id: networkItem
        StatusRadioButton {
            id: gasRectangle
            width: contentItem.implicitWidth
            contentItem: StatusListItem {
                id: card
                objectName: chainName
                leftPadding: 16
                rightPadding: 6
                implicitWidth: 410
                title: chainName
                subTitle: root.formatCurrencyAmount(tokenBalance.amount, root.selectedSymbol)
                statusListItemSubTitle.color: Theme.palette.primaryColor1
                asset.width: 32
                asset.height: 32
                asset.name: Style.svg("tiny/" + iconUrl)
                asset.isImage: true
                border.color: gasRectangle.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
                color: {
                    if (sensor.containsMouse) {
                        return Theme.palette.baseColor2
                    }
                    Theme.palette.statusListItem.backgroundColor
                }
                onClicked: {
                    if(!gasRectangle.checked)
                        gasRectangle.toggle()
                }
            }
            onCheckedChanged: {
                store.setRouteDisabledChains(chainId, !gasRectangle.checked)
                if(checked)
                    root.reCalculateSuggestedRoute()
            }
            checked: index === 0
            indicator: Item {
                width: card.width
                height: card.height
            }
            Component.onCompleted: {
                store.setRouteDisabledChains(chainId, !gasRectangle.checked)
                if(index === (repeater.count -1))
                    root.reCalculateSuggestedRoute()
            }
        }
    }
}