// 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";
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;
    VerticalLayout {
        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;
            VerticalLayout {

                WindowHeader {
                    title: name;
                }

                GridLayout {
                    padding: 6px;
                    vertical-stretch: 1;

                    Rectangle {
                        border-color: black;
                        border-width: 1px;
                        width: 60px;
                        height: 60px;
                        col: 0;
                        row: 0;
                        clip: true;
                        Rectangle {
                            height: 2 * (parent.height);
                            width: 2px;
                            background: white;
                            transform-rotation: -45deg;
                        }

                        Text {
                            text: "RPM";
                            font-size: 14px;
                            color: Palette.text-primary;

                            transform-origin: { x: self.width / 2, y: self.height / 2 };
                            transform-rotation: 45deg;

                            x: parent.width / 2 + 18px * sin(45deg) - self.width / 2;
                            y: parent.height / 2 - 18px * sin(45deg) - self.height / 2;
                        }

                        Text {
                            text: "Map";
                            font-size: 14px;
                            color: Palette.text-primary;

                            transform-origin: { x: self.width / 2, y: self.height / 2 };
                            transform-rotation: 45deg;

                            x: parent.width / 2 - 18px * sin(45deg) - self.width / 2;
                            y: parent.height / 2 + 18px * sin(45deg) - self.height / 2;
                        }
                    }

                    for i in rpm-axis.length: Rectangle {
                        border-color: black;
                        border-width: 1px;
                        width: 60px;
                        height: 60px;

                        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: 60px;
                        height: 30px;

                        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: 60px;
                        height: 30px;

                        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);
                        }
                    }
                }
            }

            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; }
            }
        }
    }
}