import { App, Astal, Gtk, Gdk } from "astal/gtk3"
import { Variable, GLib, bind } from "astal"
import Hyprland from "gi://AstalHyprland"
import Tray from "gi://AstalTray"
import PowerMenu from "./PowerMenu"
import Cpu from "./Cpu"

const time = Variable("").poll(1000, "date")

function Workspaces() {
    const hypr = Hyprland.get_default()

    return <box className="Workspaces">
        {bind(hypr, "workspaces").as(wss => wss
            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
            .sort((a, b) => a.id - b.id)
            .map(ws => (
                <button
                    className={bind(hypr, "focusedWorkspace").as(fw =>
                        ws === fw ? "focused" : "")}
                    onClicked={() => ws.focus()}>
                    {ws.id}
                </button>
            ))
        )}
    </box>
}

function FocusedClient() {
    const hypr = Hyprland.get_default()
    const focused = bind(hypr, "focusedClient")

    return <box
        className="Focused"
        visible={focused.as(Boolean)}>
        {focused.as(client => (
            client && <label label={bind(client, "title").as(String)} />
        ))}
        {/* {focused.as(client => (
            client && <label label={bind(client, "icon").as(String)} />
        ))} */}
    </box>
}

function Time({ format = "%H:%M - %A %e" }) {
    const time = Variable<string>("").poll(1000, () =>
        GLib.DateTime.new_now_local().format(format)!)

    return <label
        className="Time"
        onDestroy={() => time.drop()}
        label={time()}
    />
}

function SysTray() {
    const tray = Tray.get_default()

    return <box className="SysTray">
        {bind(tray, "items").as(items => items.map(item => (
            <menubutton
                tooltipMarkup={bind(item, "tooltipMarkup")}
                usePopover={false}
                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
                menuModel={bind(item, "menuModel")}>
                <icon gicon={bind(item, "gicon")} />
            </menubutton>
        )))}
    </box>
}

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

    return <><window
        className="Bar"
        name="Bar"
        gdkmonitor={gdkmonitor}
        exclusivity={Astal.Exclusivity.EXCLUSIVE}
        anchor={TOP | LEFT | RIGHT}
        application={App}>
        <centerbox>
            <box hexpand halign={Gtk.Align.START} className="RoudedBlock">
                <button
                    onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
                    halign={Gtk.Align.START}
                    className="Menubutton"
                >
                    
                </button>
                <Cpu />
                <FocusedClient />
            </box>  
            <box hexpand halign={Gtk.Align.CENTER} className="RoudedBlock">
                <Workspaces />
            </box>
            <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
                <SysTray />
                {/* <SysTray />
                <Wifi />
                <AudioSlider />
                <BatteryLevel /> */}
                <Time />
                <button
                    onClicked={() => App.toggle_window("powermenu")}
                    halign={Gtk.Align.START}
                    className="Menubutton"
                >
                    ⏻
                </button>
            </box>
        </centerbox>
    </window>
    <PowerMenu />
    </>
}