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;
  return (
    <div ref={ref} className="relative">
      <Button size="sm" className="min-w-24" onClick={toggle} aria-expanded={open} title={save.error ?? undefined}>
        {current === "ignore" ? "Ignoring" : current === "none" || current === "participating" ? "Watch" : "Unwatch"} ▾
      </Button>
      {open && (
        <div className="animate-rise absolute right-0 z-20 mt-2 w-72 overflow-hidden rounded-md border border-gray-800 bg-gray-950 shadow-2xl shadow-black/60">
          {LEVELS.map((item) => (
            <button
              key={item.value}
              type="button"
              onClick={() => choose(item.value === "participating" ? "none" : item.value)}
              className={cn(
                "block w-full px-3 py-2 text-left hover:bg-gray-900",
                (current === item.value || (item.value === "participating" && current === "none")) &&
                  "border-l-2 border-accent-500",
              )}
            >
              <div className="text-sm text-gray-100">{item.label}</div>
              <div className="text-xs text-gray-500">{item.hint}</div>
            </button>
          ))}
          {save.error && <p className="px-3 py-2 text-xs text-red-400">{save.error}</p>}
        </div>
      )}
    </div>
  );
}