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

import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.controls 1.0

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

import "../controls"
import "../popups"
import "../stores"

Rectangle {
    id: walletInfoContainer

    property int selectedAccountIndex: 0
    property var changeSelectedAccount: function(){}
    property var showSavedAddresses: function(showSavedAddresses){}
    property var emojiPopup: null

    function onAfterAddAccount () {
        walletInfoContainer.changeSelectedAccount(RootStore.accounts.rowCount() - 1)
    }

    color: Style.current.secondaryMenuBackground

    StyledText {
        id: title
        //% "Wallet"
        text: qsTrId("wallet")
        anchors.top: parent.top
        anchors.topMargin: Style.current.padding
        anchors.horizontalCenter: parent.horizontalCenter
        font.weight: Font.Bold
        font.pixelSize: 17
    }

    Item {
        id: walletValueTextContainer
        anchors.left: parent.left
        anchors.leftMargin: Style.current.padding
        anchors.right: parent.right
        anchors.rightMargin: Style.current.padding
        anchors.top: title.bottom
        anchors.topMargin: Style.current.padding
        height: childrenRect.height

        StyledTextEdit {
            id: walletAmountValue
            color: Style.current.textColor
            text: {
                Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
            }
            selectByMouse: true
            cursorVisible: true
            readOnly: true
            anchors.left: parent.left
            font.weight: Font.Medium
            font.pixelSize: 30
        }

        StyledText {
            id: totalValue
            color: Style.current.secondaryText
            //% "Total value"
            text: qsTrId("wallet-total-value")
            anchors.left: walletAmountValue.left
            anchors.top: walletAmountValue.bottom
            font.weight: Font.Medium
            font.pixelSize: 13
        }

        AddAccountButton {
            id: addAccountButton
            anchors.top: parent.top
            anchors.right: parent.right
            onClicked: {
                if (newAccountMenu.opened) {
                    newAccountMenu.close()
                } else {
                    newAccountMenu.popup(addAccountButton.x + addAccountButton.width/2 - newAccountMenu.width/2 ,
                                         addAccountButton.y + addAccountButton.height + 55)
                }
            }
        }
    }

    AddNewAccountMenu {
        id: newAccountMenu
        onAboutToShow: addAccountButton.state = "pressed"
        onAboutToHide: {
            addAccountButton.state = "default";
            addAccountButton.checked = false;
        }
        onGenerateNewAccountTriggered: {
            generateAccountModal.open();
        }
        onAddWatchAccountTriggered: {
            addWatchOnlyAccountModal.open();
        }
        onEnterSeedPhraseTriggered: {
            addAccountWithSeedModal.open();
        }
        onEnterPrivateKeyTriggered: {
            addAccountWithPrivateKeydModal.open();
        }
    }

    GenerateAccountModal {
        id: generateAccountModal
        anchors.centerIn: parent
        onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
        emojiPopup: walletInfoContainer.emojiPopup
    }

    AddAccountWithSeedModal {
        id: addAccountWithSeedModal
        anchors.centerIn: parent
        onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
        emojiPopup: walletInfoContainer.emojiPopup
    }

    AddAccountWithPrivateKeyModal {
        id: addAccountWithPrivateKeydModal
        anchors.centerIn: parent
        onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
        emojiPopup: walletInfoContainer.emojiPopup
    }

    AddWatchOnlyAccountModal {
        id: addWatchOnlyAccountModal
        anchors.centerIn: parent
        onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
        emojiPopup: walletInfoContainer.emojiPopup
    }

    ScrollView {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: btnSavedAddresses.height + Style.current.padding
        anchors.top: walletValueTextContainer.bottom
        anchors.topMargin: Style.current.padding
        anchors.horizontalCenter: parent.horizontalCenter
        width: 272
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
        clip: true

        ListView {
            id: listView

            spacing: 5
            anchors.top: parent.top
            width: parent.width
            height: parent.height
            boundsBehavior: Flickable.StopAtBounds
            clip: true

            delegate: StatusListItem {
                width: parent.width
                highlighted: index === selectedAccountIndex
                title: model.name
                subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
                icon.emoji: !!model.emoji ? model.emoji: ""
                icon.color: model.color
                icon.name: !model.emoji ? "filled-account": ""
                icon.letterSize: 14
                icon.isLetterIdenticon: !!model.emoji ? true : false
                icon.background.color: Theme.palette.indirectColor1
                onClicked: {
                    changeSelectedAccount(index)
                    showSavedAddresses(false)
                }
            }

            model: RootStore.accounts
//            model: RootStore.exampleWalletModel
        }
    }

    StatusNavigationListItem {
        id: btnSavedAddresses

        anchors.bottom: parent.bottom
        anchors.bottomMargin: Style.current.halfPadding
        anchors.left: parent.left
        anchors.leftMargin: Style.current.smallPadding
        anchors.right: parent.right
        anchors.rightMargin: Style.current.smallPadding

        title: qsTr("Saved addresses")
        icon.name: "address"
        onClicked: {
            showSavedAddresses(true)
        }
    }
}