import { GTK_ALIGN_CENTER, GTK_ALIGN_END, GTK_ALIGN_START } from "../constants.js"
import { Clock } from "./Clock.js"
import { SysTray } from "./Systray.js"

function BarStart() {
    return Widget.Box({
        halign: GTK_ALIGN_START,
        children: [
            Widget.Label({ label: "Start" }),
            Widget.Button({ label: "Button", onClicked: () => App.ToggleWindow("media2") }),
        ],
    })
}
function BarCenter() {
    return Widget.Box({
        halign: GTK_ALIGN_CENTER,
        children: [
            Clock(),
        ],
    })
}
function BarEnd() {
    return Widget.Box({
        halign: GTK_ALIGN_END,
        children: [
            SysTray(),
        ],
    })
}

export function Bar(monitor = 0) {
    return Widget.Window({
        monitor,
        exclusivity: "exclusive",
        className: "bar",
        margins: [5, 5, 0, 5],
        name: `bar${monitor}`,
        anchor: ["left", "top", "right"],
        child: Widget.CenterBox({
            vertical: false,
            startWidget: BarStart(),
            centerWidget: BarCenter(),
            endWidget: BarEnd(),
        })
    })
}