// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later
import { Palette } from "../palette.slint";
import { WindowHeader } from "window-header.slint";
struct DataItem {
    label: string,
    value: float,
    unit: string,
  }

component DataColumn {
    in property <[DataItem]> data;
    HorizontalLayout {
        VerticalLayout {
            alignment: center;

            for item in data: HorizontalLayout {
                HorizontalLayout {
                    alignment: center;
                    padding-top: 6px;
                    padding-bottom: 6px;
                    Text {
                        text: item.label;
                        color: Palette.text-primary;
                        font-size: 14px;
                    }
                }
            }
        }

        VerticalLayout {
            alignment: center;

            for item in data: HorizontalLayout {
                HorizontalLayout {
                    alignment: center;
                    padding-top: 6px;
                    padding-bottom: 6px;
                    Text {
                        text: item.value + item.unit;
                        color: Palette.text-primary;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

export component DataWindow {
    in property <[DataItem]> data1;
    in property <[DataItem]> data2;
    HorizontalLayout {
        padding: 12px;
        Rectangle {
            area := TouchArea {
                mouse-cursor: pointer;
            }

            background: Palette.bg-main;
            border-radius: 8px;
            drop-shadow-color: black;
            drop-shadow-offset-x: 6px;
            drop-shadow-offset-y: 6px;
            drop-shadow-blur: 10px;
            width: 500px;
            vertical-stretch: 1;
            VerticalLayout {
                visible: true;
                alignment: start;
                WindowHeader {
                    title: "Data";
                }

                HorizontalLayout {
                    padding-left: 10px;
                    padding-right: 10px;
                    padding-bottom: 10px;
                    alignment: space-between;
                    DataColumn {
                        width: 218px;
                        data: data1;
                    }

                    HorizontalLayout {
                        vertical-stretch: 1;
                        width: 21px;
                        padding: 10px;
                        Rectangle {
                            width: 1px;
                            background: Palette.border;
                        }
                    }

                    DataColumn {
                        width: 218px;
                        data: data2;
                    }
                }
            }

            Rectangle {
                background: transparent;
                border-color: area.has-hover ? Palette.border-focus : Palette.border;
                border-width: 2px;
                border-radius: 8px;
                vertical-stretch: 1;
                animate border-color { duration: 200ms; }
            }
        }
    }
}