import { App, Astal, Gdk, Gtk } from "astal/gtk4";

import Battery from "gi://AstalBattery";

import NetworkInfo from "./components/network_info";
import { BatteryInfo } from "./components/battery";
import Workspace from "./components/workspace";
import DateTime from "@lib/widgets/datetime";
import TrayView from "./components/tray";
import Separator from "@/lib/widgets/separator";

export default function Bar(monitor_id: number) {
    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
    const CENTER = Gtk.Align.CENTER;

    const battery = Battery.get_default();

    const openQuickSettings = (_self: Gtk.Button, state: Gdk.ButtonEvent) => {
        if (state.get_button() === Gdk.BUTTON_PRIMARY)
            App.get_window("quick_settings")?.show()
    }

    return <window
        visible
        name={`bar_${monitor_id}`}
        monitor={monitor_id}
        cssClasses={["bar"]}
        exclusivity={Astal.Exclusivity.IGNORE}
        anchor={BOTTOM | LEFT | RIGHT}
        application={App}>
        <box halign={CENTER} cssClasses={["inner"]}>
            {[
                Workspace(),
                <menubutton hasFrame={false}>
                    <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
                    <popover>
                        <Gtk.Calendar />
                    </popover>
                </menubutton>,
                BatteryInfo({ battery }),
                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />,
                NetworkInfo(),
                TrayView()
            ].reduce((acc, it) => <>
                {acc}
                {Separator()}
                {it}
            </>)}
        </box>
    </window>
}