import { hook } from "astal/gtk4";
import { bind } from "astal";

import Tray from "gi://AstalTray";

export default function TrayView() {
    const tray = Tray.get_default();
    const items = bind(tray, "items");

    return <box spacing={items.as(items => items.length)} cssClasses={["tray"]}>
        {items.as(items => items.map(item => {
            const button = <menubutton
                cssClasses={["item"]}
                tooltipMarkup={bind(item, "tooltipMarkup")}
                menuModel={bind(item, "menuModel")}
                hasFrame={false}
                primary
                setup={self => self.insert_action_group("dbusmenu", item.actionGroup)}
            >
                <image gicon={item.gicon} />
            </menubutton>;

            hook(button, item, "notify::action-group", self => {
                self.insert_action_group("dbusmenu", item.actionGroup);
            });

            return button;
        }))}
    </box>
}