import { GroupBox, VerticalBox, HorizontalBox, ListView, Button } from "std-widgets.slint";
import {
    Cell,
    CurrencyCell,
    CurrencyIcon,
    ElidingText,
    HeaderCell,
    MonoTextCell,
    SmallButton,
    TableHeader,
    TextCell,
    TouchCell
} from "common.slint";
import { Facade } from "global.slint";

export component Portfolio inherits Rectangle {
    callback currency-filter-clicked(string);

    VerticalBox {
        padding: 0;

        HorizontalBox {
            vertical-stretch: 0;
            GroupBox {
                title: "Balance";
                Text {
                    font-family: "DejaVu Sans Mono";
                    text: Facade.portfolio.balance;
                }
            }
            GroupBox {
                title: "Cost Base";
                Text {
                    font-family: "DejaVu Sans Mono";
                    text: Facade.portfolio.cost-base;
                }
            }
            GroupBox {
                title: "Unrealized Gains";
                Text {
                    font-family: "DejaVu Sans Mono";
                    text: Facade.portfolio.unrealized-gains;
                }
            }
            HorizontalBox {
                Button {
                    text: "Load";
                    clicked => { Facade.load-portfolio(); }
                }
                Button {
                    text: "Close";
                    clicked => { Facade.close-portfolio(); }
                }
                height: self.preferred-height;
                width: self.preferred-width;
            }
        }

        HorizontalBox {
            Text {
                text: "Holdings";
                font-weight: 600;
                font-size: 13px;
            }
        }

        VerticalLayout {
            spacing: 2px;

            summary-header := TableHeader {
                horizontal-padding-left: 1px;
                Cell {
                    padding-left: 4px;
                    HeaderCell { text: "Currency"; }
                }
                HeaderCell { text: "Quantity"; }
                HeaderCell { text: "Cost"; horizontal-alignment: right; }
                HeaderCell { text: "Value"; horizontal-alignment: right; }
                HeaderCell { text: "ROI"; horizontal-alignment: right; }
                HeaderCell { text: "Unrealized Gain"; horizontal-alignment: right; }
                Rectangle { horizontal-stretch: 0.05; }
                VerticalLayout {
                    height: 0;
                    visible: false; // only used for alignment purposes
                    SmallButton { text: "#"; }
                }
            }

            summary-view := ListView {
                for holding[index] in Facade.portfolio.holdings: Rectangle {
                    property <bool> even: mod(index, 2) == 0;

                    background: touch.has-hover || quantity-touch.has-hover || ignore-btn.has-hover ? #4564 : even ? #ffffff06 : transparent;
                    border-radius: self.height / 4;

                    touch := TouchArea {}

                    HorizontalLayout {
                        padding-left: 1px;
                        padding-right: 17px;
                        spacing: summary-header.item-spacing;

                        CurrencyCell {
                            cmc-id: holding.currency-cmc-id;
                            currency: holding.currency;
                            clicked => { root.currency-filter-clicked(holding.currency) }
                        }
                        quantity-touch := TouchCell {
                            pointer-event(event) => {
                                if (event.kind == PointerEventKind.down) {
                                    popup.show();
                                }
                            }
                            VerticalLayout {
                                padding-top: 2px;
                                padding-bottom: 2px;

                                quantity-background := Rectangle {
                                    border-radius: self.height / 4;
                                    border-color: #3e3e3e;
                                    border-width: 1px;

                                    states [
                                        hovered when quantity-touch.has-hover: {
                                            quantity-background.background: #1e1e1e;
                                            quantity-background.border-color: #6e6e6e;
                                        }
                                    ]

                                    HorizontalLayout {
                                        padding: 4px;
                                        padding-left: 8px;
                                        padding-right: 8px;
                                        ElidingText {
                                            text: holding.quantity;
                                            font-family: "DejaVu Sans Mono";
                                        }
                                    }

                                    popup := PopupWindow {
                                        width: 300px;
                                        height: balances-list.preferred-height;
                                        x: parent.width + 5px;
                                        y: 0;
                                        Rectangle {
                                            z: 100;
                                            background: #000000;
                                            border-radius: 5px;
                                            border-color: #3e3e3e;
                                            border-width: 1px;

                                            balances-list := VerticalLayout {
                                                padding-top: 5px;
                                                padding-bottom: 5px;
                                                padding-left: 1px;
                                                padding-right: 1px;
                                                spacing: 5px;

                                                balances-header := TableHeader {
                                                    separator: false;
                                                    horizontal-padding-left: 7px;
                                                    horizontal-padding-right: 7px;
                                                    HeaderCell { text: "Wallet"; }
                                                    HeaderCell { text: "Quantity"; }
                                                }

                                                for balance[index] in Facade.balances-for-currency(holding.currency): Rectangle {
                                                    HorizontalLayout {
                                                        padding-left: 9px;
                                                        padding-right: 9px;
                                                        spacing: balances-header.item-spacing;

                                                        TextCell { text: balance.source; }
                                                        MonoTextCell { text: balance.balance; horizontal-alignment: left; }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        cost-text := MonoTextCell { text: holding.cost; }
                        MonoTextCell { text: holding.value; }
                        MonoTextCell {
                            text: holding.roi;
                            color: {
                                if (holding.roi == "-") {
                                    cost-text.color
                                } else if (holding.is-profit) {
                                    #00ff00
                                } else {
                                    #ff0000
                                }
                            }
                        }
                        MonoTextCell { text: holding.unrealized-gain; }
                        Rectangle { horizontal-stretch: 0.05; }
                        VerticalLayout {
                            alignment: center;
                            ignore-btn := SmallButton {
                                text: "–";
                                tooltip: "Ignore currency";

                                clicked => { Facade.ignore-currency(holding.currency) }
                            }
                        }
                    }
                }
            }
        }
    }
}