import QtQuick
import QtQuick.Layouts
import "../Flowee" as Flowee
import "../Utils.js" as Utils
import Flowee.org.pay;

Rectangle {
    id: transactionDelegate
    property var placementInGroup: model.placementInGroup
    // Is this transaction a 'move between addresses' tx.
    // This is a heuristic and not available in the model, which is why its in the view.
    property bool isMoved: Utils.isMoved(model);
    color: palette.base

    width: root.width
    height: model.isTransaction ? 80 : 20
    clip: true

    Rectangle {
        width: parent.width - 16
        x: 8
        // we always have the rounded circles, but if we should not see them, we move them out of the clipped area.
        height: {
            var h = 80
            var placement = transactionDelegate.placementInGroup;

            if (placement !== Wallet.GroupStart && placement !== Wallet.Ungrouped)
                h += 20;
            if (placement !== Wallet.GroupEnd && placement !== Wallet.Ungrouped)
                h += 20;
            return h;
        }
        y: {
            var placement = transactionDelegate.placementInGroup;
            if (placement === Wallet.GroupStart || placement === Wallet.Ungrouped)
                return 0;
            return -20;
        }

        radius: 10
        color: palette.light
        border.width: 1
        border.color: palette.midlight
    }

    Item {
        id: checks // confirmations
        width: Math.max(row.width, 14)
        height: 12
        anchors.right: parent.right
        anchors.rightMargin: 25
        anchors.top: txListItem.baseline
        anchors.topMargin: 4
        property int txHeight: model.height
        property int confirmations: Pay.chainHeight - txHeight + 1
        visible: txHeight === -1 || confirmations < 5

        Rectangle {
            color: "#00000000"
            border.width: 1.3
            border.color: Pay.useDarkSkin ? palette.dark : mainWindow.floweeBlue
            opacity: 0.6
            width: 14
            height: 13
            radius: 4
            visible: checks.confirmations < 2 || checks.txHeight == -1
        }
        Row {
            id: row
            height: parent.height

            Repeater {
                model: {
                    if (checks.txHeight < 0)
                        return 0;
                    var c = checks.confirmations;
                    return c < 5 ? c : 0;
                }
                Flowee.CheckShape {
                    color: "#57a56c"
                    height: 10
                }
            }
        }
    }

    TransactionListItem {
        id: txListItem
        anchors.fill: parent
        anchors.leftMargin: 10
        anchors.rightMargin: 10
    }

    // horizontal separator
    Rectangle {
        visible: transactionDelegate.placementInGroup !== Wallet.GroupEnd
                     && transactionDelegate.placementInGroup !== Wallet.Ungrouped;
        anchors.bottom: parent.bottom
        height: 1
        width: parent.width - 16
        x: 8
        color: palette.midlight
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.currentIndex = index;
            var newItem = popupOverlay.open(selectedItem, transactionDelegate, overlayTxListItem);
            newItem.infoObject = portfolio.current.txInfo(model.walletIndex, newItem);
            root.model.freezeModel = true;
        }
        Connections {
            target: popupOverlay
            // unfreeze the model on closing of the popup
            function onIsOpenChanged() {
                if (!popupOverlay.isOpen)
                    root.model.freezeModel = false;
            }
        }
    }
    Component {
        id: selectedItem
        TransactionInfoSmall { }
    }
    Component {
        id: overlayTxListItem
        TransactionListItem {
            width: parent.width
            implicitHeight: 80
            commentEditable: true
        }
    }
}