import { VerticalBox, Button } from "std-widgets.slint";
import { Palette } from "palette.slint";



component StatusBadge {
    in property <string> label;
    in property <brush> color;

    horizontal-stretch: 0;
    HorizontalLayout {
        spacing: 6px;
        Rectangle {
            width: 10px;
            height: 10px;
            background: color;
            border-radius: self.width / 2;
            y: (parent.height - self.height) / 2;
        }

        Text {
            text: label;
            color: Palette.text-primary;
            vertical-alignment: center;
            font-size: 14px;
        }
    }
}

component MenuButton {
    in property <string> text;
    callback clicked;

    height: 28px;

    Rectangle {
        border-width: 2px;
        border-color: Palette.brand;

        background: area.pressed ? Palette.brand.darker(0.3) : area.has-hover ? Palette.bg-hover : Palette.bg-main;

        HorizontalLayout {
            padding-left: 12px;
            padding-right: 12px;

            Text {
                text: root.text;
                font-size: 14px;
                color: Palette.text-primary;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        area := TouchArea {
            mouse-cursor: pointer;

            clicked => {
                root.clicked();
            }
        }
    }
}

export component AppWindow inherits Window {
    title: "My App";

    // Allow WM to resize normally
    min-width: 400px;
    min-height: 300px;

    preferred-width: 900px;
    preferred-height: 600px;

    VerticalBox {
        width: 100%;
        height: 100%;

        spacing: 0;
        padding: 0;

        // Top bar
        Rectangle {
            height: 40px;
            width: 100%;
            background: Palette.bg-secondary;

            HorizontalLayout {
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                spacing: 6px;

                MenuButton {
                    text: "File";
                }

                MenuButton {
                    text: "Edit";
                }

                Rectangle {
                    horizontal-stretch: 1;
                }

                MenuButton {
                    text: "Setting";
                }
            }
        }

        Rectangle {
            width: 100%;
            height: 2px;
            background: Palette.brand;
        }

        // Main content
        Rectangle {
            background: Palette.bg-main;
            horizontal-stretch: 1;
            vertical-stretch: 1;
        }

        Rectangle {
            width: 100%;
            height: 2px;
            background: Palette.brand;
        }

        Rectangle {
            height: 32px;
            background: Palette.bg-secondary;
            width: 100%;

            HorizontalLayout {
                height: 100%;
                width: 100%;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                spacing: 20px;

                StatusBadge {
                    label: "LoRa";
                    color: Palette.success;
                }

                StatusBadge {
                    label: "V-Link";
                    color: Palette.error;
                }

                Rectangle {
                    horizontal-stretch: 0;
                    height: parent.height - (2 * parent.padding-top);
                    width: 2px;
                    background: Palette.bg-main;
                }

                Rectangle {
                    horizontal-stretch: 1;
                    Text {
                        text: "ENGINE [WARNING] - High Engine Temperature";
                        font-size: 14px;
                        color: Palette.text-primary;
                    }
                }

                Rectangle {
                    horizontal-stretch: 0;
                    height: parent.height - (2 * parent.padding-top);
                    width: 2px;
                    background: Palette.bg-main;
                }

                StatusBadge {
                    label: "Engine";
                    color: Palette.warning;
                }

                StatusBadge {
                    label: "ECU";
                    color: Palette.success;
                }

                StatusBadge {
                    label: "Telemetry";
                    color: Palette.success;
                }
            }
        }
    }
}