import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3

import utils 1.0
import shared.stores 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 "../panels"
import "../controls"
import "../views"

Item {
    id: root
    clip: true
    implicitHeight: visible ? accountSelectionTabBar.height + stackLayout.height + Style.current.bigPadding: 0

    property var store
    property var locale

    signal contactSelected(string address, int type)

    QtObject {
        id: d
        readonly property int maxHeightForList: 281
    }

    StatusTabBar {
        id: accountSelectionTabBar
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width
        
        StatusTabButton {
            id: assetBtn
            width: implicitWidth
            text: qsTr("Saved")
        }
        StatusTabButton {
            id: collectiblesBtn
            width: implicitWidth
            objectName: "myAccountsTab"
            text: qsTr("My Accounts")
        }
        StatusTabButton {
            id: historyBtn
            width: implicitWidth
            text: qsTr("Recent")
        }
    }

    StackLayout {
        id: stackLayout
        anchors.top: accountSelectionTabBar.bottom
        height: currentIndex === 0 ? savedAddresses.height: currentIndex === 1 ? myAccounts.height : recents.height
        width: parent.width
        currentIndex: accountSelectionTabBar.currentIndex

        // To-do adapt to new design and make block white/balck once the list items etc support new color scheme
        Rectangle {
            Layout.maximumWidth: parent.width
            Layout.maximumHeight : savedAddresses.height
            color: Theme.palette.indirectColor1
            radius: 8

            StatusListView {
                id: savedAddresses
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                implicitWidth: parent.width
                height: Math.min(d.maxHeightForList, savedAddresses.contentHeight)

                model: root.store.savedAddressesModel
                header:  savedAddresses.count > 0 ? search : nothingInList
                headerPositioning: ListView.OverlayHeader
                delegate: StatusListItem {
                    implicitWidth: parent.width
                    height: visible ? 64 : 0
                    title: name
                    subTitle: address
                    radius: 0
                    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
                    visible: !savedAddresses.headerItem.text || name.toLowerCase().includes(savedAddresses.headerItem.text)
//                    TODO uncomment when #6456 is fixed
//                    components: [
//                        StatusIcon {
//                            icon: "star-icon"
//                            width: 12
//                            height: 12
//                        }
//                    ]
                    onClicked: contactSelected(address, RecipientSelector.Type.Address )
                }
                Component {
                    id: search
                    ColumnLayout {
                        width: parent.width
                        StatusInput {
                            Layout.preferredHeight: 55
                            Layout.preferredWidth: parent.width
                            input.showBackground: false
                            placeholderText: qsTr("Search for saved address")
                            input.rightComponent: StatusIcon {
                                icon: "search"
                                height: 17
                                color: Theme.palette.baseColor1
                            }
                        }
                        Rectangle {
                            Layout.preferredHeight: 1
                            Layout.preferredWidth: parent.width
                            color: Theme.palette.baseColor3
                        }
                    }
                }
                Component {
                    id: nothingInList
                    StatusBaseText {
                        width: savedAddresses.width
                        height: visible ? 56 : 0
                        font.pixelSize: 15
                        color: Theme.palette.directColor1
                        text: qsTr("No Saved Address")
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
        }
        Rectangle {
            id: myAccountsRect
            Layout.maximumWidth: parent.width
            Layout.maximumHeight : myAccounts.height
            color: Theme.palette.indirectColor1
            radius: 8

            StatusListView {
                id: myAccounts
                objectName: "myAccountsList"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                width: parent.width
                height: Math.min(d.maxHeightForList, myAccounts.contentHeight)

                delegate: StatusListItem {
                    implicitWidth: parent.width
                    objectName: model.name
                    height: visible ? 64 : 0
                    title: !!model.name ? model.name : ""
                    subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance, root.locale)
                    asset.emoji: !!model.emoji ? model.emoji: ""
                    asset.color: model.color
                    asset.name: !model.emoji ? "filled-account": ""
                    asset.letterSize: 14
                    asset.isLetterIdenticon: !!model.emoji ? true : false
                    asset.bgColor: Theme.palette.indirectColor1
                    radius: 0
                    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
                    onClicked: contactSelected(model.address, RecipientSelector.Type.Account )
                }

                model: root.store.accounts
            }
        }

        Rectangle {
            Layout.maximumWidth: parent.width
            Layout.maximumHeight : recents.height
            color: Theme.palette.indirectColor1
            radius: 8

            StatusListView {
                id: recents
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                width: parent.width
                height: Math.min(d.maxHeightForList, recents.contentHeight)

                header: StatusBaseText {
                    height: visible ? 56 : 0
                    width: recents.width
                    font.pixelSize: 15
                    color: Theme.palette.directColor1
                    text: qsTr("No Recents")
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    visible: recents.count <= 0
                }

                delegate: StatusListItem {
                    property bool isIncoming: to === store.currentAccount.address
                    implicitWidth: parent.width
                    height: visible ? 64 : 0
                    title: isIncoming ? from : to
                    subTitle: Utils.getTimeDifference(new Date(parseInt(timestamp) * 1000), new Date())
                    statusListItemTitle.elide: Text.ElideMiddle
                    statusListItemTitle.wrapMode: Text.NoWrap
                    radius: 0
                    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
                    components: [
                        StatusIcon {
                            id: transferIcon
                            height: 15
                            width: 15
                            color: isIncoming ? Style.current.success : Style.current.danger
                            icon: isIncoming ? "arrow-down" : "arrow-up"
                            rotation: 45
                        },
                        StatusBaseText {
                            id: contactsLabel
                            font.pixelSize: 15
                            color: Theme.palette.directColor1
                            text: store.hex2Eth(value)
                        }
                    ]
                    onClicked: contactSelected(title, RecipientSelector.Type.Address)
                }

                model: root.store.walletSectionTransactionsInst.model
            }
        }
    }
}