import QtQuick 2.13

import shared.status 1.0
import shared.popups 1.0
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0

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

Item {
    id: root
    signal goBack

    property WalletStore walletStore
    property var emojiPopup

    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

        Row {
            id: header
            spacing: Style.current.smallPadding
            StatusSmartIdenticon {
                id: accountImage
                anchors.verticalCenter: parent.verticalCenter
                icon: StatusIconSettings {
                    width: isLetterIdenticon ? 40 : 20
                    height: isLetterIdenticon ? 40 : 20
                    color: walletStore.currentAccount.color
                    emoji: walletStore.currentAccount.emoji
                    name: !walletStore.currentAccount.emoji ? "filled-account": ""
                    letterSize: 14
                    isLetterIdenticon: !!walletStore.currentAccount.emoji
                    background: StatusIconBackgroundSettings {
                        width: 40
                        height: 40
                        color: Theme.palette.primaryColor3
                    }
                }
            }
            Column {
                spacing: Style.current.halfPadding
                Row {
                    spacing: Style.current.halfPadding
                    StatusBaseText {
                        id: accountName
                        text: walletStore.currentAccount.name
                        font.weight: Font.Bold
                        font.pixelSize: 28
                        color: Theme.palette.directColor1
                    }
                    StatusFlatRoundButton {
                        width: 28
                        height: 28
                        anchors.verticalCenter: accountName.verticalCenter
                        type: StatusFlatRoundButton.Type.Tertiary
                        color: "transparent"
                        icon.name: "pencil"
                        onClicked: Global.openPopup(renameAccountModalComponent)
                    }
                }
                StatusAddress {
                    text: walletStore.currentAccount.address
                    font.pixelSize: 15
                }
            }
        }

        Item {
            height: Style.current.bigPadding
            width: parent.width
        }

        Item {
            height: 50
            width: parent.width
            
            Rectangle {
                id: typeRectangle
                border.width: 1
                border.color: Theme.palette.directColor7
                radius: Style.current.radius
                width: typeText.width + Style.current.xlPadding
                height: parent.height
                color: Style.current.transparent
                StatusBaseText {
                    id: labelType
                    anchors.top: parent.top
                    anchors.topMargin: Style.current.smallPadding
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: qsTr("Type")
                    font.pixelSize: 13
                    color: Theme.palette.directColor5
                }
                StatusBaseText {
                    id: typeText
                    anchors.top: labelType.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: {
                        const walletType = walletStore.currentAccount.walletType
                        if (walletType === "watch") {
                            return qsTr("Watch-Only Account")
                        } else if (walletType === "generated" || walletType === "") {
                            return qsTr("Generated by your Status seed phrase profile")
                        } else if (walletType === "imported") {
                            return qsTr("Imported Account")
                        }
                    }
                    font.pixelSize: 15
                    color: Theme.palette.directColor1
                }
            }

            Rectangle {
                id: storageRectangle
                anchors.left: typeRectangle.right
                anchors.leftMargin: Style.current.padding
                border.width: 1
                border.color: Theme.palette.directColor7
                radius: Style.current.radius
                width: storageText.width + Style.current.xlPadding
                height: parent.height
                color: Style.current.transparent

                StatusBaseText {
                    id: labelStorage
                    anchors.top: parent.top
                    anchors.topMargin: Style.current.smallPadding
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: qsTr("Storage")
                    font.pixelSize: 13
                    color: Theme.palette.directColor5
                }
                StatusBaseText {
                    id: storageText
                    anchors.top: labelStorage.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: qsTr("On Device")
                    font.pixelSize: 15
                    color: Theme.palette.directColor1
                }
            }
        }

        Item {
            height: Style.current.bigPadding
            width: parent.width
        }

        Rectangle {
            visible: walletStore.currentAccount.path !== ""
            border.width: 1
            border.color: Theme.palette.directColor7
            radius: Style.current.radius
            width: Math.max(path.width, labelPath.width) + Style.current.xlPadding
            height: 50
            color: Style.current.transparent

            StatusBaseText {
                id: labelPath
                anchors.top: parent.top
                anchors.topMargin: Style.current.smallPadding
                anchors.left: parent.left
                anchors.leftMargin: Style.current.smallPadding
                text: qsTr("Derivation Path")
                font.weight: Font.Medium
                font.pixelSize: 13
                color: Theme.palette.directColor5
            }
            StatusBaseText {
                id: path
                anchors.top: labelPath.bottom
                anchors.left: parent.left
                anchors.leftMargin: Style.current.smallPadding
                text: walletStore.currentAccount.path
                font.pixelSize: 15
                color: Theme.palette.directColor1
            }
        }

        Item {
            height: Style.current.bigPadding
            width: parent.width
        }

        StatusButton {
            visible: walletStore.currentAccount.walletType !== ""
            text: qsTr("Remove from your profile")
            type: StatusBaseButton.Type.Danger

            ConfirmationDialog {
                id: confirmationPopup
                header.title: qsTr("Confirm %1 Removal").arg(walletStore.currentAccount.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(walletStore.currentAccount.address);
                }

            }

            onClicked : {
                confirmationPopup.open()
            }
        }
    }

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