import { App, Astal, Gdk, Gtk } from "astal/gtk3"
import Workspaces from "./Workspaces"
import Clock from "./Clock"
import { VolumeWidget } from "./Volume"

export default function Bar(gdkmonitor: Gdk.Monitor) {
    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
    const volume = VolumeWidget(gdkmonitor)

    return [
        (
            <window
                className="Bar"
                namespace="ags-bar"
                gdkmonitor={gdkmonitor}
                exclusivity={Astal.Exclusivity.EXCLUSIVE}
                anchor={TOP | LEFT | RIGHT}
                application={App}
            >
                <centerbox className="bar">
                    <box
                        className="bar-left"
                        halign={Gtk.Align.START}
                        valign={Gtk.Align.CENTER}
                    >
                        <Workspaces />
                    </box>
                    <box
                        className="bar-center"
                        halign={Gtk.Align.CENTER}
                        valign={Gtk.Align.CENTER}
                    >
                        <Clock />
                    </box>
                    <box
                        className="bar-right"
                        halign={Gtk.Align.END}
                        valign={Gtk.Align.CENTER}
                    >
                        {volume.button}
                    </box>
                </centerbox>
            </window>
        ),
        volume.popup,
    ]
}