import QtQuick
import QtQuick.Window

Window {
    id: root

    width: 1240
    height: 1080
    visible: true

    flags: Qt.FramelessWindowHint
    color: "#000000"

    // ─────────────────────────────────────────────────────────────
    // Clock
    // ─────────────────────────────────────────────────────────────

    property date currentTime: new Date()

    Timer {
        interval: 1000
        running: true
        repeat: true

        onTriggered: root.currentTime = new Date()
    }

    Text {
        id: clock

        anchors {
            top: parent.top
            left: parent.left
            topMargin: 40
            leftMargin: 48
        }

        text: Qt.formatTime(root.currentTime, "h:mm AP")

        color: "#ffffff"

        font {
            pixelSize: 64
            weight: Font.Medium
        }
    }


    // ─────────────────────────────────────────────────────────────
    // Battery
    //
    // Fake percentage for the moment. We'll connect this to
    // /sys/class/power_supply from C++ next.
    // ─────────────────────────────────────────────────────────────

    property int batteryPercent: systemInfo.batteryPercent

    Item {
        id: battery

        width: batteryIcon.width + 18 + batteryText.width
        height: 72

        anchors {
            top: parent.top
            right: parent.right
            topMargin: 40
            rightMargin: 48
        }

        // Battery body
        Rectangle {
            id: batteryIcon

            width: 72
            height: 38

            anchors.verticalCenter: parent.verticalCenter

            color: "transparent"
            border {
                width: 4
                color: "#ffffff"
            }

            radius: 5

            // Battery fill
            Rectangle {
                anchors {
                    left: parent.left
                    top: parent.top
                    bottom: parent.bottom

                    leftMargin: 7
                    topMargin: 7
                    bottomMargin: 7
                }

                width: Math.max(
                    0,
                    (parent.width - 14) *
                    root.batteryPercent / 100
                )

                color: {
                    if (root.batteryPercent <= 15)
                        return "#ff453a"

                    if (root.batteryPercent <= 35)
                        return "#ffd60a"

                    return "#32d74b"
                }

                radius: 2
            }

            // Battery terminal
            Rectangle {
                width: 7
                height: 18

                anchors {
                    left: parent.right
                    verticalCenter: parent.verticalCenter
                }

                color: "#ffffff"

                topRightRadius: 3
                bottomRightRadius: 3
            }
        }

        Text {
            id: batteryText

            anchors {
                left: batteryIcon.right
                leftMargin: 18
                verticalCenter: parent.verticalCenter
            }

            text: root.batteryPercent + "%"

            color: "#ffffff"

            font {
                pixelSize: 64
                weight: Font.Medium
            }
        }
    }
}