import QtQuick 2.13


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

import utils 1.0
import shared.status 1.0
import shared.popups 1.0
import shared.controls 1.0

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

Item {
    id: root
    signal goBack

    property WalletStore walletStore
    property var emojiPopup
    property var account

    Column {
        id: column
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: Style.current.padding
        anchors.rightMargin: Style.current.padding

        spacing: Style.current.bigPadding

        Row {
            id: header
            spacing: Style.current.smallPadding
            StatusSmartIdenticon {
                id: accountImage
                objectName: "walletAccountViewAccountImage"
                anchors.verticalCenter: parent.verticalCenter
                asset: StatusAssetSettings {
                    width: isLetterIdenticon ? 40 : 20
                    height: isLetterIdenticon ? 40 : 20
                    color: root.account ? root.account.color : "#ffffff"
                    emoji: root.account ? root.account.emoji : ""
                    name: root.account && !root.account.emoji ? "filled-account": ""
                    letterSize: 14
                    isLetterIdenticon: !!root.account && !!root.account.emoji
                    bgWidth: 40
                    bgHeight: 40
                    bgColor: Theme.palette.primaryColor3
                }
            }
            Column {
                spacing: Style.current.halfPadding
                Row {
                    spacing: Style.current.halfPadding
                    StatusBaseText {
                        objectName: "walletAccountViewAccountName"
                        id: accountName
                        text:root.account ? root.account.name : ""
                        font.weight: Font.Bold
                        font.pixelSize: 28
                        color: Theme.palette.directColor1
                    }
                    StatusFlatRoundButton {
                        objectName: "walletAccountViewEditAccountButton"
                        width: 28
                        height: 28
                        anchors.verticalCenter: accountName.verticalCenter
                        type: StatusFlatRoundButton.Type.Tertiary
                        color: "transparent"
                        icon.name: "pencil"
                        onClicked: Global.openPopup(renameAccountModalComponent)
                    }
                }
                StatusAddressPanel {
                    value: root.account ? root.account.address : ""

                    font.weight: Font.Normal

                    showFrame: false

                    onDoCopy: (address) => globalUtils.copyToClipboard(address)
                }
            }
        }


        Flow {
            width: parent.width

            spacing: Style.current.halfPadding

            InformationTile {
                id: typeRectangle
                maxWidth: parent.width
                primaryText: qsTr("Type")
                secondaryText: {
                    if (!root.account) {
                        return ""
                    }
                    const walletType = root.account.walletType
                    if (walletType === "watch") {
                        return qsTr("Watch-Only Account")
                    } else if (walletType === "generated" || walletType === "") {
                        return qsTr("Generated by your Status seed phrase profile")
                    } else {
                        return qsTr("Imported Account")
                    }
                }
            }

            InformationTile {
                maxWidth: parent.width
                primaryText: qsTr("Storage")
                secondaryText: qsTr("On Device")
            }

            InformationTile {
                maxWidth: parent.width
                primaryText: qsTr("Derivation Path")
                secondaryText: root.account ? root.account.path : ""
                visible: !!root.account && root.account.path
            }

            InformationTile {
                maxWidth: parent.width
                visible:root.account ? root.account.relatedAccounts.count > 0 : false
                primaryText: qsTr("Related Accounts")
                tagsModel: root.account ? root.account.relatedAccounts : []
                tagsDelegate: StatusListItemTag {
                    bgColor: model.color
                    bgRadius: 6
                    height: 22
                    closeButtonVisible: false
                    asset.emoji: model.emoji
                    asset.emojiSize: Emoji.size.verySmall
                    asset.isLetterIdenticon: true
                    title: model.name
                    titleText.font.pixelSize: 12
                    titleText.color: Theme.palette.indirectColor1
                }
            }
        }

        StatusButton {
            objectName: "deleteAccountButton"
            visible: !!root.account && root.account.walletType !== "" 
            text: qsTr("Remove from your profile")
            type: StatusBaseButton.Type.Danger

            ConfirmationDialog {
                id: confirmationPopup
                confirmButtonObjectName: "confirmDeleteAccountButton"
                header.title: qsTr("Confirm %1 Removal").arg(root.account ? root.account.name : "")
                confirmationText: qsTr("You will not be able to restore viewing access to this account in the future unless you enter this account’s address again.")
                confirmButtonLabel: qsTr("Remove Account")
                onConfirmButtonClicked: {
                    confirmationPopup.close();
                    root.goBack();
                    root.walletStore.deleteAccount(root.account.address);
                }

            }

            onClicked : {
                confirmationPopup.open()
            }
        }
    }

    Component {
        id: renameAccountModalComponent
        RenameAccontModal {
            account: root.account
            anchors.centerIn: parent
            onClosed: destroy()
            walletStore: root.walletStore
            emojiPopup: root.emojiPopup
        }
    }
}