// 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";
struct DataItem {
    label: string,
    value: float,
    unit: string,
  }

component DataColumn {
    in property <[DataItem]> data;
    preferred-width: 100%;
    preferred-height: 100%;
    HorizontalLayout {
        width: 100%;
        height: 100%;
        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;
    preferred-width: 100%;
    preferred-height: 100%;
    HorizontalLayout {
        padding: 12px;

        Rectangle {
            area := TouchArea {
                mouse-cursor: pointer;
            }

            background: Palette.bg-main;
            border-color: area.has-hover ? Palette.border-focus : Palette.border;
            border-width: 2px;
            border-radius: 8px;
            drop-shadow-color: black;
            drop-shadow-offset-x: 6px;
            drop-shadow-offset-y: 6px;
            drop-shadow-blur: 10px;
            HorizontalLayout {
                DataColumn {
                    data: data1;
                }

                HorizontalLayout {
                    height: 100%;
                    width: 1px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    Rectangle {
                        padding: 10px;
                        width: 1px;
                        background: Palette.bg-secondary;
                    }
                }

                DataColumn {
                    data: data2;
                }
            }
        }
    }
}