// 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";
export component MapWindow {
    in property <[float]> data;
    in property <[float]> rpm-axis;
    in property <[float]> map-axis;
    in property <float> data-min;
    in property <float> data-max;
    in property <string> name;
    preferred-width: 100%;
    preferred-height: 100%;
    VerticalLayout {
        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;
            VerticalLayout {

                HorizontalLayout {
                    alignment: center;
                    padding-top: 6px;
                    Text {
                        text: name;
                        font-size: 20px;
                        color: Palette.text-primary;
                    }
                }

                GridLayout {
                    width: 100%;
                    padding: 6px;
                    vertical-stretch: 1;

                    for i in rpm-axis.length: Rectangle {
                        border-color: black;
                        border-width: 1px;
                        width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);

                        property <int> r: 0;
                        property <int> c: mod(i, rpm-axis.length) + 1;
                        col: c;
                        row: r;
                        Text {
                            text: rpm-axis[i];
                            color: Palette.text-primary;
                            font-size: 16px;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                    for i in map-axis.length: Rectangle {
                        border-color: black;
                        border-width: 1px;
                        width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);

                        property <int> r: i + 1;
                        property <int> c: 0;
                        col: c;
                        row: r;
                        Text {
                            text: map-axis[i];
                            color: Palette.text-primary;
                            font-size: 16px;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                    for i in data.length: Rectangle {
                        border-color: black;
                        border-width: 1px;
                        background: hsv((240deg - ((data[i] - data-min) / (data-max - data-min)) * 240deg), 0.8, 0.80);
                        width: (parent.width - 2 * parent.padding) / (rpm-axis.length + 1);

                        property <int> r: i / rpm-axis.length + 1;
                        property <int> c: mod(i, rpm-axis.length) + 1;
                        col: c;
                        row: r;
                        Text {
                            text: data[i];
                            color: Palette.text-primary;
                            font-size: 14px;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                            stroke: hsv((240deg - ((data[i] - data-min) / (data-max - data-min)) * 240deg), 0.8, 0.3);
                        }
                    }
                }
            }
        }
    }
}