import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { CircleCheckBig, CircleDot } from "lucide-react";
import { updateStreamStatus } from "@/lib/firestore-particles";
import { toFirestoreDocPath, particlePath } from "@/lib/particle-path";
import type { StreamParticle } from "@/hooks/use-stream-particles";

interface StreamContextMenuProps {
  particle: StreamParticle;
  networkId: string;
  children: React.ReactNode;
}

export function StreamContextMenu({ particle, networkId, children }: StreamContextMenuProps) {
  const isOpen = particle.status === "open";
  const docPath = toFirestoreDocPath(particlePath(networkId, [particle.id]));

  const toggleStatus = async () => {
    await updateStreamStatus(docPath, isOpen ? "closed" : "open");
  };

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem onSelect={toggleStatus}>
          {isOpen ? (
            <>
              <CircleCheckBig className="size-4" />
              Close stream
            </>
          ) : (
            <>
              <CircleDot className="size-4 text-green-500" />
              Open stream
            </>
          )}
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}