import { useThreadSubscription } from "~/hooks/use-thread-subscription";
import { useViewer } from "~/hooks/use-viewer";
import { Button } from "~/ui/Button";
import { SidebarSection } from "~/ui/Heading";

const REASONS: Record<string, string> = {
  manual: "You chose this setting for this thread.",
  participating: "You're receiving notifications because you're participating.",
  watching: "You're receiving notifications because you're watching this repository.",
  none: "You're not receiving notifications from this thread.",
};

export function ThreadSubscription({ owner, repo, number }: { owner: string; repo: string; number: number }) {
  const viewer = useViewer();
  const subscription = useThreadSubscription({ owner, repo, number });
  if (!viewer || !subscription.state) return null;
  const { subscribed, reason } = subscription.state;

  return (
    <SidebarSection title="Notifications">
      <Button size="sm" className="w-full" pending={subscription.pending} onClick={subscription.toggle}>
        {subscribed ? "Unsubscribe" : "Subscribe"}
      </Button>
      <p className="text-xs text-kumo-subtle">{subscription.error ?? REASONS[reason] ?? REASONS.none}</p>
    </SidebarSection>
  );
}