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

import Battery from "gi://AstalBattery";

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

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.EXCLUSIVE}
        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} />,
                TrayView()
            ]}
        </box>
    </window>
}