import { Derived } from "@/DerivedConnectable";
import { Context, Group, type Workspace } from "@services/sway";
import { bind, Variable } from "astal";
import { type Subscribable } from "astal/binding";

export function SwayWorkspace(ws: Workspace) {
  const className = new Derived(
    ws,
    (active: boolean, visible: boolean, focused: boolean) => {
      const result = ["indicator-circle", "sway--ws"];
      if (active) {
        result.push("sway--active");
      }
      if (visible) {
        result.push("sway--visible");
      }
      if (focused) {
        result.push("sway--focused");
      }
      return result.join(" ");
    },
    "active",
    "visible",
    "focused",
  );

  return (
    <button onClick={ws.focus.bind(ws)} onDestroy={() => className.drop()}>
      <circularprogress
        className={bind(className)}
        value={100}
        start-at={0}
        clockwise
        width={16}
        thickness={1}
      >
        <box className="fill" />
      </circularprogress>
    </button>
  );
}

export function SwayActiveWorkspace(group: Group) {
  const workspace = bind(group, "focusedWorkspace");
  const name = Variable.derive([workspace], (ws) => {});
}