pragma ComponentBehavior: Bound

import Quickshell
import Quickshell.Wayland
import Quickshell.Hyprland
import Quickshell.Io
import QtQuick
import QtQuick.Layouts

import "../constants"
import "../helpers"
import "."

Item {
    id: root

    property int cpuUsage: 0
    property int memUsage: 0

    RowLayout {
        anchors.fill: parent
        // anchors.centerIn: verticalCenter
        anchors.leftMargin: 8
        anchors.rightMargin: 8

        WorkspaceHelpers {
            id: workspaceHelpers
        }

        // =====================
        // LEFT: Workspaces
        // =====================
        RowLayout {
            spacing: 10

            Repeater {
                model: 9

                Text {
                    required property int index

                    property int wsId: index + 1
                    property var ws: workspaceHelpers.getWorkspace(wsId)

                    text: wsId

                    color: workspaceHelpers.isWorkspaceActive(wsId) ? Constants.colCyan : (ws ? Constants.colMagenta : Constants.colMuted)

                    font {
                        family: Constants.fontFamily
                        pixelSize: Constants.fontSize
                        bold: true
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: Hyprland.dispatch("workspace " + wsId)
                    }
                }
            }
        }

        // Spacer
        Item {
            Layout.fillWidth: true
        }

        // =====================
        // RIGHT: System info
        // =====================
        RowLayout {
            spacing: 10

            //TODO put this in separate component
            Text {
                id: cpuText
                text: "CPU: " + cpuUsage + "%"
                color: Constants.colYellow
                font.pixelSize: Constants.fontSize
                font.family: Constants.fontFamily
                font.bold: true
            }

            Rectangle {
                width: 1
                height: 16
                color: Constants.colMuted
            }

            Text {
                id: memText
                text: "Mem: " + memUsage + "%"
                color: Constants.colCyan
                font.pixelSize: Constants.fontSize
                font.family: Constants.fontFamily
                font.bold: true
            }

            Rectangle {
                width: 1
                height: 16
                color: Constants.colMuted
            }

            Clock {}
        }
    }
}