const css = `${App.configDir}/style.css`;
const hyprland = await Service.import("hyprland");
// const systray = await Service.import("systemtray");

function workspaces() {
    const active = hyprland.active.workspace.bind("id");
    const workspaces = hyprland.bind("workspaces")
          .as(ws => ws.map(({ id }) => Widget.Button({
              onClicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
              child: Widget.Label(`${id}`),
              class_name: active.as(i => `${i === id ? "focused" : ""}`),
          })))
    return Widget.Box({
        class_name: "workspaces",
        children: workspaces,
    })
}

const date = Variable("", {
    poll: [1000, 'date "+\%a \%b \%d, \%-I:\%M \%p"'],
})

function Bar(monitor = 0) {
    const myLabel = Widget.Label({
        label: 'some example content',
    })

    const clock = Widget.Label({
        label: date.bind(),
    })

    return Widget.Window({
        monitor,
        name: `bar${monitor}`, // this name has to be unique
        anchor: ['top', 'left', 'right'],
        child: Widget.CenterBox({
            startWidget: workspaces(),
            centerWidget: clock,
            endWidget: myLabel,
        }),
    })
}

App.config({
    style: css,
    windows: [
        Bar(0), // can be instantiated for each monitor
        Bar(1),
    ],
})

export { }