import { HorizontalBox, CheckBox, ComboBox, Button, VerticalBox } from "std-widgets.slint";
import { Portfolio } from "portfolio.slint";
import { Wallets } from "wallets.slint";
import { Transactions } from "transactions.slint";
import { Reports } from "reports.slint";
import { Badge } from "common.slint";
import { Facade } from "global.slint";
import { UiCapitalGain } from "structs.slint";

export { UiCapitalGain, Facade }

enum Page {
    portfolio,
    sources,
    transactions,
    reports,
}

component PageButton inherits Rectangle {
    in property <string> text <=> txt.text;
    in property <bool> active;

    callback pressed;

    border-radius: self.height / 4;
    border-color: (touch.has-hover || root.active) ? #456 : #3e3e3e;
    border-width: 1px;
    background: root.active ? #456 : touch.has-hover ? #4564 : transparent;
    height: layout.preferred-height * 1.33;
    width: layout.preferred-width + 20px;

    layout := HorizontalLayout {
        spacing: 10px;
        alignment: center;
        txt := Text {
            font-size: 14px;
            vertical-alignment: center;
        }

        @children
    }
    touch := TouchArea {
        pointer-event(event) => {
            if (event.kind == PointerEventKind.down) {
                root.pressed();
            }
        }
    }
}

component MainContent inherits VerticalLayout {
    property <Page> active-page: Page.portfolio;

    HorizontalBox {
        alignment: center;

        PageButton {
            text: "Portfolio";
            active: root.active-page == Page.portfolio;
            pressed => { root.active-page = Page.portfolio; }
        }
        PageButton {
            text: "Wallets";
            active: root.active-page == Page.sources;
            pressed => { root.active-page = Page.sources; }

            Badge {
                text: Facade.wallets.length;
            }
        }
        PageButton {
            text: "Transactions";
            active: root.active-page == Page.transactions;
            pressed => { root.active-page = Page.transactions; }

            Badge {
                text: Facade.transactions.length;
            }
        }
        PageButton {
            text: "Reports";
            active: root.active-page == Page.reports;
            pressed => { root.active-page = Page.reports; }

            Badge {
                text: Facade.reports.length;
            }
        }
    }

    Rectangle {
        Portfolio {
            visible: active-page == Page.portfolio;
            currency-filter-clicked(currency) => {
                Facade.set-currency-filter(currency);
                root.active-page = Page.transactions;
            }
        }

        Wallets {
            visible: active-page == Page.sources;
            wallet-transactions-clicked(index) => {
                Facade.set-wallet-filter(index);
                root.active-page = Page.transactions;
            }
        }

        transactions := Transactions {
            visible: active-page == Page.transactions;
        }

        Reports {
            visible: active-page == Page.reports;
            currency-filter-clicked(currency) => {
                Facade.set-currency-filter(currency);
                root.active-page = Page.transactions;
            }
            select-transaction(id) => {
                transactions.select-transaction(id);
                root.active-page = Page.transactions;
            }
        }
    }
}

component WelcomePage inherits Rectangle {
    VerticalBox {
        width: Math.min(self.preferred-width, root.width);
        height: Math.min(self.preferred-height, root.height);

        padding-top: 30px;
        padding-bottom: 30px;

        Image {
            source: @image-url("icons/app-icon.svg");
            preferred-width: 192px;
            preferred-height: 192px;
        }
        Text { text: "Raccoin"; horizontal-alignment: center; font-size: 50px; }
        Text { text: "Crypto Portfolio and Tax Reporting Tool"; horizontal-alignment: center; color: darkgray; }

        Rectangle { height: 30px; }

        HorizontalBox {
            Button {
                text: "New Portfolio";
                clicked => { Facade.new-portfolio(); }
            }
            Button {
                text: "Load Portfolio";
                clicked => { Facade.load-portfolio(); }
            }
        }
    }
}

export component AppWindow inherits Window {
    title: "Raccoin";
    icon: @image-url("icons/app-icon-64.png");

    min-width: 512px;
    min-height: 320px;
    preferred-width: 1200px;
    preferred-height: 640px;

    MainContent {
        visible: Facade.portfolio.file-name != "";
    }
    if (Facade.portfolio.file-name == ""): WelcomePage {}

    HorizontalBox {
        alignment: center;
        VerticalBox {
            alignment: end;

            Rectangle { vertical-stretch: 1; }

            for notification[index] in Facade.notifications: Rectangle {
                border-radius: 5px;
                background: darkred;
                border-color: red;
                border-width: 1px;

                HorizontalBox {
                    padding-left: 10px;
                    spacing: 10px;
                    Text {
                        text: notification.message;
                        horizontal-stretch: 1;
                        vertical-alignment: center;
                        color: white;
                    }
                    Button {
                        icon: @image-url("icons/x.svg");
                        clicked => { Facade.remove-notification(index); }
                    }
                }
            }
        }
    }
}