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";

export default function Bar(monitor_id: number) {
    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
    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}
        hexpand
    >
        <centerbox hexpand>
            {Workspace()}
            <box>
                <menubutton hasFrame={false}>
                    <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
                    <popover>
                        <Gtk.Calendar />
                    </popover>
                </menubutton>
                {BatteryInfo({ battery })}
                {NetworkInfo()}
            </box>
            <box>
                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />
                {TrayView()}
            </box>
        </centerbox>
    </window>
}
