import { App, Astal, Gtk } from "astal/gtk3";
import { bind, Variable } from "astal";
import { SystemName } from "./system/Name";
import { Tree } from "@/services/sway/workspaces";

const time = Variable("").poll(1000, "date");

export default function Bar(monitor: number) {
  const tree = Tree.instance;
  const currentContext = bind(tree, "currentContextName");
  return (
    <window
      className="Bar"
      monitor={monitor}
      exclusivity={Astal.Exclusivity.EXCLUSIVE}
      anchor={
        Astal.WindowAnchor.TOP |
        Astal.WindowAnchor.LEFT |
        Astal.WindowAnchor.RIGHT
      }
      application={App}
    >
      <centerbox>
        <label label={currentContext} />
        <box>
          <SystemName />
        </box>
        <button onClick={() => print("hello")} halign={Gtk.Align.CENTER}>
          <label label={time()} />
        </button>
      </centerbox>
    </window>
  );
}