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

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

    const right: Array<JSX.Element> = []
    if (wifi.button) right.push(wifi.button)
    right.push(volume.button)
    if (battery.button) right.push(battery.button)

    const popups: Array<JSX.Element> = []
    if (wifi.popup) popups.push(wifi.popup)
    popups.push(volume.popup)
    if (battery.popup) popups.push(battery.popup)

    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}
                    >
                        {right}
                    </box>
                </centerbox>
            </window>
        ),
        ...popups,
    ]
}