import { HorizontalBox, ListView, VerticalBox } from "std-widgets.slint";
import {
    Cell,
    CurrencyIcon,
    DateTimeCell,
    ElidingText,
    HeaderCell,
    MonoTextCell,
    TableHeader,
    TextCell
} from "./common.slint";
import { UiCapitalGain } from "./structs.slint";

export component CapitalGains inherits VerticalLayout {
    in property <[UiCapitalGain]> gain-entries;

    callback select-transaction(int);

    spacing: 2px;

    header := TableHeader {
        horizontal-padding-left: -2px;

        Rectangle {
            height: bought-text.preferred-height;

            Cell {
                padding-left: 5px;
                bought-text := HeaderCell {
                    text: "Bought";
                    width: 100%;
                }
            }

            DateTimeCell { visible: false; }    // only used for alignment purposes
        }
        Rectangle {
            height: sold-text.preferred-height;

            Cell {
                padding-left: 5px;
                sold-text := HeaderCell {
                    text: "Sold";
                    width: 100%;
                }
            }

            DateTimeCell { visible: false; }    // only used for alignment purposes
        }
        HeaderCell { text: "Amount"; horizontal-stretch: 1.5; }
        HeaderCell { text: "Cost (€)"; horizontal-alignment: right; }
        HeaderCell { text: "Proceeds (€)"; horizontal-alignment: right; }
        HeaderCell { text: "Gain or Loss (€)"; horizontal-alignment: right; }
        HeaderCell { text: "Long / Short"; horizontal-stretch: 0.5; horizontal-alignment: right; }
    }

    list-view := ListView {
        for gain[index] in root.gain-entries: Rectangle {
            property <bool> even: mod(index, 2) == 0;

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

            touch := TouchArea {}

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

                Rectangle {
                    background: sold-touch.has-hover ? #456 : transparent;
                    border-radius: self.height / 4;

                    sold-touch := TouchArea {
                        clicked => { root.select-transaction(gain.bought-tx-id) }
                        mouse-cursor: pointer;
                    }
                    DateTimeCell {
                        padding-top: 3px;
                        padding-bottom: 3px;
                        date: gain.bought-date;
                        time: gain.bought-time;
                    }
                }
                Rectangle {
                    background: gain-touch.has-hover ? #456 : transparent;
                    border-radius: self.height / 4;

                    gain-touch := TouchArea {
                        clicked => { root.select-transaction(gain.sold-tx-id) }
                        mouse-cursor: pointer;
                    }
                    DateTimeCell {
                        padding-top: 3px;
                        padding-bottom: 3px;
                        date: gain.sold-date;
                        time: gain.sold-time;
                    }
                }
                Cell {
                    horizontal-stretch: 1.5;
                    CurrencyIcon {
                        cmc-id: gain.currency-cmc-id;
                    }
                    ElidingText {
                        text: gain.amount;
                        font-family: "DejaVu Sans Mono";
                    }
                }
                MonoTextCell { text: gain.cost; }
                MonoTextCell { text: gain.proceeds; }
                MonoTextCell { text: gain.gain-or-loss; color: gain.gain-or-loss < 0 ? #ff0000 : #00ff00; }
                TextCell { text: gain.long-term ? "Long" : "Short"; horizontal-stretch: 0.5; horizontal-alignment: right; }
            }
        }
    }
}