import { IdCard, Mail } from "lucide-react";
import { useNavigate } from "react-router";
import { createChannel } from "~/lib/api/client/user";
import type { UserId } from "~/lib/api/types";
import { useUsersStore } from "~/stores/users-store";
import {
    ContextMenu,
    ContextMenuContent,
    ContextMenuItem,
    ContextMenuSeparator,
    ContextMenuTrigger,
} from "./ui/context-menu";

interface UserContextMenuProps {
    userId: UserId;
    children: React.ReactNode;
}

export default function UserContextMenu({ userId, children }: UserContextMenuProps) {
    const currentUser = useUsersStore((state) => state.getCurrentUser());
    const navigate = useNavigate();

    const onMessage = async () => {
        const reponse = await createChannel([userId]);

        navigate(`/app/@me/channels/${reponse.id}`);
    };

    const onCopyId = () => {
        navigator.clipboard.writeText(userId);
    };

    return (
        <>
            <ContextMenu>
                <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
                <ContextMenuContent>
                    {currentUser?.id !== userId && (
                        <>
                            <ContextMenuItem asChild onClick={onMessage}>
                                <div className="flex justify-between gap-2">
                                    Message
                                    <Mail />
                                </div>
                            </ContextMenuItem>
                            <ContextMenuSeparator />
                        </>
                    )}
                    <ContextMenuItem asChild onClick={onCopyId}>
                        <div className="flex justify-between gap-2">
                            Copy ID
                            <IdCard />
                        </div>
                    </ContextMenuItem>
                </ContextMenuContent>
            </ContextMenu>
        </>
    );
}