import AstalTray from "gi://AstalTray";
import { bind } from "astal";
import AstalHyprland from "gi://AstalHyprland";

const SysTray = () => {
    const tray = AstalTray.get_default();

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


const HyprlandWorkspace = () => {
    const hypr = AstalHyprland.get_default()

    return <box className={"HyprlandWorkspaces"}>
        {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 ? "HyprlandFocusedWorkspace" : "")}
                    onClicked={() => ws.focus()}>
                    {ws.id}
                </button>
            ))
        )}
    </box>
}


const HyprlandActiveWindow = () => {
    const hypr = AstalHyprland.get_default();
    const focused = bind( hypr, "focusedClient" );

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

export default {
    HyprlandWorkspace, 
    HyprlandActiveWindow,
    SysTray
}