import { bind } from "astal"
import Tray from "gi://AstalTray"

const tray = Tray.get_default()

export default function Systray(props: { iconSide: "left" | "right" }) {
    return <box className={`pill Systray icon-${props.iconSide}`}>
        {props.iconSide == "left" && <label className="icon" label="󱊔" />}
        {bind(tray, "items").as(items => items.map(item => <SystrayItem item={item} />))}
        {props.iconSide == "right" && <label className="icon" label="󱊔" />}
    </box>
}

function SystrayItem({ item }: { item: Tray.TrayItem }) {
    return <menubutton
        className="item"
        tooltipMarkup={bind(item, "tooltipMarkup")}
        usePopover={false}
        actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
        menuModel={bind(item, "menuModel")}>
        <icon gicon={bind(item, "gicon")} />
    </menubutton>
}