import { ListView, HorizontalBox, CheckBox, ComboBox, Button, VerticalBox, ScrollView , LineEdit} from "std-widgets.slint";
import { Badge, ElidingText, TableHeader, HeaderCell, TextCell, MonoTextCell, CurrencyIcon, Cell } from "common.slint";
import { Facade } from "global.slint";
import { UiBalanceForWallet, UiTransactionSource, UiWallet } from "structs.slint";

component HoldingsButton inherits TouchArea {
    in property <[UiBalanceForWallet]> balances;

    pointer-event(event) => {
        if (event.kind == PointerEventKind.down && balances.length > 0) {
            popup.show();
        }
    }

    states [
        disabled when balances.length == 0: {
            holdings-text.color: gray;
        }
        hovered when root.has-hover: {
            holdings-background.background: #1e1e1e;
            holdings-background.border-color: #6e6e6e;
        }
    ]

    VerticalLayout {
        holdings-background := Rectangle {
            border-radius: 5px;
            border-color: #3e3e3e;
            border-width: 1px;

            HorizontalLayout {
                padding: 4px;
                padding-left: 8px;
                padding-right: 8px;
                holdings-text := ElidingText {
                    text: "Holdings";
                }
            }

            popup := PopupWindow {
                width: 300px;
                height: balances-list.preferred-height;
                x: 0 - 300px - 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;

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

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

                                Cell {
                                    CurrencyIcon {
                                        cmc-id: balance.currency-cmc-id;
                                    }
                                    ElidingText {
                                        text: balance.currency;
                                    }
                                }
                                MonoTextCell { text: balance.balance; horizontal-alignment: left; }
                            }
                        }
                    }
                }
            }
        }
    }
}

export component Wallets inherits ScrollView {
    in property <[UiWallet]> wallets: Facade.wallets;

    callback wallet-transactions-clicked(int);

    VerticalBox {
        padding-left: 17px;
        padding-right: 17px;

        for wallet[wallet-index] in wallets: wallet-item := Rectangle {
            property <bool> is-expanded: false;

            border-width: 1px;
            border-radius: 5px;
            border-color: #3e3e3e;
            background: #212121;

            states [
                hovered when header-touch.has-hover: {
                    background: #4564;
                }
                expanded when self.is-expanded: {
                    background: #2e2e2e;
                }
            ]

            VerticalLayout {
                header-touch := TouchArea {
                    pointer-event(event) => {
                        if (event.kind == PointerEventKind.down) {
                            is-expanded = !is-expanded;
                        }
                    }

                    HorizontalBox {
                        CheckBox {
                            checked: wallet.enabled;
                            text: wallet.name;

                            toggled => {
                                wallet.enabled = self.checked;
                                Facade.set-wallet-enabled(wallet_index, self.checked);
                            }
                        }
                        Badge {
                            text: "\{wallet.transaction-count} transactions";
                            interactive: true;
                            clicked => { root.wallet-transactions-clicked(wallet_index); }
                        }
                        Rectangle {}
                        HoldingsButton {
                            balances: Facade.balances-for-wallet(wallet-index);
                        }
                        Button {
                            icon: @image-url("icons/trash-2.svg");
                            text: "Remove Wallet";
                            clicked => { Facade.remove-wallet(wallet-index); }
                        }
                    }
                }

                Rectangle {
                    height: sources-layout.height;
                    clip: true;
                    background: #1e1e1e;

                    border-radius: 5px;
                    border-width: 1px;
                    border-color: #3e3e3e;

                    sources-layout := VerticalBox {
                        states [
                            expanded when wallet-item.is-expanded: {
                                height: sources-layout.preferred-height;
                            }
                            collapsed when !wallet-item.is-expanded: {
                                height: 0px;
                            }
                        ]

                        animate height {
                            duration: 100ms;
                        }

                        for source[source_index] in wallet.sources: HorizontalBox {
                            padding: 0;
                            CheckBox {
                                checked: source.enabled;
                                text: source.name;
                                opacity: wallet.enabled ? 1.0 : 0.5;

                                toggled => {
                                    source.enabled = self.checked;
                                    Facade.set-source-enabled(wallet_index, source_index, self.checked);
                                }
                            }
                            ElidingText {
                                text: source.path;
                            }
                            Rectangle { width: 1px; }
                            Badge {
                                text: "\{source.transaction-count} transactions";
                                opacity: 0.5;
                            }
                            Rectangle {}
                            ComboBox {
                                model: Facade.source-types;
                                horizontal-stretch: 0;
                                current-value: source.source_type;
                                enabled: false;
                            }
                            Button {
                                icon: @image-url("icons/refresh-cw.svg");
                                enabled: source.can-sync;
                                opacity: self.enabled ? 1.0 : 0.3;
                                clicked => { Facade.sync-source(wallet_index, source_index); }
                            }
                            Button {
                                icon: @image-url("icons/trash-2.svg");
                                clicked => { Facade.remove-source(wallet_index, source_index); }
                            }
                        }
                        HorizontalBox {
                            alignment: end;
                            padding-left: 0;
                            padding-right: 0;
                            padding-bottom: 0;

                            Button {
                                text: "Add Source";
                                clicked => { Facade.add-source(wallet-index); }
                            }
                        }
                    }
                }
            }
        }

        HorizontalBox {
            alignment: end;
            wallet-name := LineEdit {
                placeholder-text: "New Wallet Name";
                enabled: Facade.portfolio.file-name != "";
                accepted => {
                    if (wallet-name.text != "") {
                        Facade.add-wallet(wallet-name.text);
                        wallet-name.text = "";
                    }
                }
            }
            Button {
                text: "Add Wallet";
                enabled: wallet-name.text != "";
                clicked => {
                    Facade.add-wallet(wallet-name.text);
                    wallet-name.text = "";
                }
            }
        }

        Rectangle {}
    }
}