gitfor/platform

import { useState } from "react";
import { getWatchLevel, setWatchLevel } from "~/fns/notification-settings";
import { useAction } from "~/hooks/use-action";
import { Button } from "./ui/Button";
import { cn } from "~/utils/cn";
import { useDismiss } from "~/hooks/use-dismiss";

const LEVELS = [
  { value: "participating", label: "Participating and @mentions", hint: "Only threads you're involved in" },
  { value: "all", label: "All activity", hint: "Every issue, pull request and release" },
  { value: "releases", label: "Releases only", hint: "New releases plus participating" },
  { value: "ignore", label: "Ignore", hint: "Never notify, even when mentioned" },
] as const;

type Level = (typeof LEVELS)[number]["value"] | "none";

export function WatchMenu({ owner, repo, watching }: { owner: string; repo: string; watching: boolean }) {
  const [open, setOpen] = useState(false);
  const [level, setLevel] = useState<string | null>(null);
  const save = useAction(setWatchLevel);
  const ref = useDismiss<HTMLDivElement>(open, () => setOpen(false));

  async function toggle() {
    if (!open && level === null) setLevel((await getWatchLevel({ data: { owner, repo } })).level);
    setOpen((value) => !value);
  }

  async function choose(next: Level) {
    if (await save.run({ data: { owner, repo, level: next } })) {
      setLevel(next);
      setOpen(false);
    }
  }

  const current = level ?? (watching ? "all" : "none");
  return (
    <div ref={ref} className="relative">
      <Button size="sm" onClick={toggle} pending={save.pending} aria-expanded={open}>
        {current === "ignore" ? "Ignoring" : current === "none" || current === "participating" ? "Watch" : "Unwatch"} ▾
      </Button>