import AstalTray from "gi://AstalTray";
import { bind, Variable } 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 Workspace = () => {
    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 ActiveWindow = () => {
    const hypr = AstalHyprland.get_default();
    const focused = bind( hypr, "focusedClient" );
    let visible = Variable( false );

    const toggleOverlay = () => {
        visible.set( !visible.get() );
    }

    return <box className={"HyprlandFocusedClients"} visible={focused.as(Boolean)}>
        <button onClicked={toggleOverlay}>
            {focused.as( client => (
                client && <label label={bind( client, "title" ).as( String )} />
            ))}
        </button>
        <eventbox visible={bind(visible).as( v => v )} name="popover-container">
            <label label="This is a test"></label>
        </eventbox>
    </box>
}


export default {
    Workspace, 
    ActiveWindow,
    SysTray
}