// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { LineEdit } from "std-widgets.slint";
import { ComponentCard } from "./components/component_card.slint";

import { Horizontal, Vertical, Switch } from "./material.slint";

import "./fonts/Roboto-VariableFont.ttf";
import { FilledIcons, OutlinedIcons } from "./icons.slint";

export struct LightData {
    name: string,
    entity_id: string,
    on: bool,
    available: bool,
}

component LightSwitch inherits Horizontal {
    in property <LightData> light;
    callback toggled(LightData, bool);

    alignment: end;
    label := Text {
        text: root.light.name;
        vertical-alignment: center;
        horizontal-alignment: right;
        font-size: 24px;
        font-weight: root.light.on ? 700 : 500;
    }
    switch := Switch {
        enabled: root.light.available;
        checked: root.light.on;
        checked_state_changed(checked) => { root.toggled(root.light, checked) }
    }
}


// The window the user interacts with. Edits to the inputs propagate to
// the SystemTrayIcon instance via the host language's callbacks.
export component MainWindow inherits Window {
    title: "Dashboard";
    preferred-width: 1024px;
    preferred-height: 600px;
    default-font-family: "Roboto";

    in property <[LightData]> lights;
    callback toggle-light(LightData, bool);

    in-out property <int> current-page: 0;
    in property <string> next-event-label: "NEXT EVENT";
    in property <string> next-event-title: "LOADING CALENDAR";
    in property <string> next-event-time: "6:00 pm";

    Rectangle {
        x: 0;
        y: 0;
        width: parent.width;
        height: 5px;
        background: black;
    }

    Rectangle {
        x: 0;
        y: 0;
        width: parent.width / 2;
        height: parent.height;
        background: black;
    }

    TouchArea {
        x: 0;
        y: 5px;
        width: parent.width - 78px;
        height: 78px;
        clicked => { root.current-page = 2; }
    }

    Text {
        x: 38px;
        y: 12px;
        width: (parent.width / 2) - (38px * 2) - 100px;
        height: 18px;
        text: root.next-event-label;
        font-size: 14px;
        font-weight: 700;
    }

    Text {
        x: 38px;
        y: 32px;
        width: (parent.width / 2) - (38px * 2) - 100px;
        height: 36px;
        text: root.next-event-title;
        font-size: 22px;
        font-weight: 700;
        overflow: elide;
        vertical-alignment: center;
    }

    Text {
        x: (root.width / 2) - self.width - 38px;
        y: 32px;
        width: 100px;
        height: 36px;
        text: root.next-event-time;
        font-size: 18px;
        font-weight: 700;
        horizontal-alignment: right;
        vertical-alignment: center;
    }

    Rectangle {
        x: 0px;
        y: 32px + 36px + 5px;
        width: (root.width / 2);
        height: root.height - (32px + 36px + 5px);
    }

    Rectangle {
        x: (root.width / 2);
        y: 5px;
        width: (root.width / 2);
        height: root.height - 10px;

        ComponentCard {
            title: "Lights";

            Vertical {
                alignment: start;

                for light_data in root.lights: LightSwitch {
                    light: light_data;
                    toggled(light, checked) => { root.toggle-light(light, checked); }
                }
            }
        }
    }
}