gitfor/platform

import { useState } from "react";
import { getWatchLevel, setWatchLevel } from "~/fns/notification-settings";
import { useOptimisticMutation } from "~/hooks/use-optimistic-mutation";
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 = useOptimisticMutation(
    level ?? (watching ? "all" : "none"),
    (_state: string, next: Level) => next,
    async (next: Level) => {
      await setWatchLevel({ data: { owner, repo, level: next } });
      setLevel(next);
    },
  );
  const ref = useDismiss<HTMLDivElement>(open, () => setOpen(false));

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

  function choose(next: Level) {
    setOpen(false);
    save.run(next);
  }

  const current = save.state;