import { Check } from "lucide-react"
import { NavLink } from "react-router"
import type { RecipientChannel } from "~/lib/api/types"
import { cn } from "~/lib/utils"
import { useUserStore } from "~/store/user"
import { OnlineStatus } from "./online-status"
import { Avatar, AvatarImage } from "./ui/avatar"
import { Badge } from "./ui/badge"

interface PrivateChannelListItemProps {
    channel: RecipientChannel
}

export default function PrivateChannelListItem({ channel }: PrivateChannelListItemProps) {
    const userId = useUserStore(state => state.user?.id)
    const recipients = channel.recipients.filter(recipient => recipient.id !== userId);
    const renderSystemBadge = recipients.some(recipient => recipient.system) && recipients.length === 1

    return (
        <>
            <NavLink to={`/app/@me/channels/${channel.id}`} className={({ isActive }) =>
                cn(
                    "rounded-xl justify-start",
                    isActive ? "bg-primary/20" : "bg-accent",
                )
            }>
                <div className="flex items-center gap-2 max-w-72 p-2">
                    <div>
                        <OnlineStatus status="online">
                            <Avatar>
                                <AvatarImage src={`https://api.dicebear.com/9.x/bottts/jpg?seed=${channel.name}`} />
                            </Avatar>
                        </OnlineStatus>
                    </div>
                    <div className="truncate">
                        {recipients.map(recipient => recipient.displayName || recipient.username).join(", ")}
                    </div>
                    {renderSystemBadge && <Badge variant="default"> <Check /> System</Badge>}
                </div>
            </NavLink>
        </>
    )
}