import { Check } from "lucide-react"
import { NavLink } from "react-router"
import type { RecipientChannel } from "~/lib/api/types"
import { cn } from "~/lib/utils"
import { useUsersStore } from "~/stores/users-store"
import { Badge } from "../ui/badge"
import { Button } from "../ui/button"
import UserAvatar from "../user-avatar"
import { OnlineStatus } from "./online-status"

interface PrivateChannelListItemProps {
    channel: RecipientChannel
}

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

    return (
        <>
            <NavLink to={`/app/@me/channels/${channel.id}`}>
                {
                    ({ isActive }) => (
                        <Button variant="secondary" size="none" asChild className={
                            cn(
                                isActive ? "bg-accent hover:bg-accent" : "",
                                "w-full flex flex-row justify-start"
                            )
                        }>
                            <div className="flex items-center gap-2 max-w-72 p-2">
                                <div>
                                    <OnlineStatus status="online">
                                        <UserAvatar user={channel.recipients.find(recipient => recipient.id !== currentUserId)} />
                                    </OnlineStatus>
                                </div>
                                <div className="truncate">
                                    {recipients.map(recipient => recipient.displayName || recipient.username).join(", ")}
                                </div>
                                {renderSystemBadge && <Badge variant="default"> <Check /> System</Badge>}
                            </div>
                        </Button>
                    )
                }
            </NavLink>
        </>
    )
}