diplom-frontend/app/components/custom-ui/channel-list-item.tsx

import { ChevronDown, Hash, Volume2 } from "lucide-react";
import React from "react";
import { NavLink } from "react-router";
import { useShallow } from "zustand/react/shallow";
import { deleteChannel } from "~/lib/api/client/server";
import { ChannelType, type ServerChannel } from "~/lib/api/types";
import { cn } from "~/lib/utils";
import { useChannelsVoiceStateStore } from "~/stores/channels-voice-state";
import { useGatewayStore } from "~/stores/gateway-store";
import { useUsersStore } from "~/stores/users-store";
import { useVoiceStateStore } from "~/stores/voice-state-store";
import { Button } from "../ui/button";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "../ui/context-menu";
import UserAvatar from "../user-avatar";

interface ChannelListItemProps {
    channel: ServerChannel;
}

const onDeleteChannel = async (channel: ServerChannel) => {
    const response = await deleteChannel(channel.serverId, channel.id);
};

function ServerCategory({ channel }: ChannelListItemProps) {
    return (
        <div className="text-xs flex flex-row justify-between mt-4">
            <div className="grow">
                <div className="flex items-center gap-1">
                    {channel.name}
                    <ChevronDown className="size-4" />
                </div>
            </div>
        </div>
    );
}

function ServerVoice({ channel }: ChannelListItemProps) {
    const updateVoiceState = useGatewayStore((state) => state.updateVoiceState);
    const voiceStateChannel = useVoiceStateStore((state) => state.activeChannel);
    const channelVoiceState = useChannelsVoiceStateStore((state) => state.channels[channel.id]) || {};
    const userIds = Object.keys(channelVoiceState.users ?? {});

    const { users, fetchUsersIfNotPresent } = useUsersStore(
        useShallow((state) => ({
            users: state.users,
            fetchUsersIfNotPresent: state.fetchUsersIfNotPresent,
        })),
    );

    const channelUsers = React.useMemo(() => userIds.map((userId) => users[userId]).filter(Boolean), [userIds, users]);

    React.useEffect(() => {
        fetchUsersIfNotPresent(userIds);
    }, [userIds]);

    const onClick = () => {
        if (voiceStateChannel?.serverId === channel.serverId && voiceStateChannel.channelId === channel.id) return;

        updateVoiceState(channel.serverId, channel.id);
    };

    return (
        <>
            <ContextMenu>
                <ContextMenuTrigger asChild>
                    <Button variant="secondary" size="sm" className="justify-start" onClick={onClick}>
                        <div className="flex items-center gap-2 max-w-72">
                            <div>
                                <Volume2 />
                            </div>
                            <div className="truncate">{channel.name}</div>
                        </div>
                    </Button>
                </ContextMenuTrigger>
                <ContextMenuContent>
                    <ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
                        Delete
                    </ContextMenuItem>
                </ContextMenuContent>
            </ContextMenu>
            {channelUsers.length > 0 && (
                <div className="ml-2 border-l-2 flex flex-col gap-1">
                    {channelUsers.map((user) => (
                        <div key={user.id} className="flex items-center gap-2 max-w-72 pl-4">
                            <UserAvatar user={user} className="size-6" />
                            {user.displayName || user.username}
                        </div>
                    ))}
                </div>
            )}
        </>
    );
}

function ServerText({ channel }: ChannelListItemProps) {
    return (
        <NavLink to={`/app/server/${channel.serverId}/${channel.id}`} discover="none">
            {({ isActive }) => (
                <ContextMenu>
                    <ContextMenuTrigger asChild>
                        <Button
                            variant="secondary"
                            size="sm"
                            className={cn(
                                "justify-start w-full",
                                isActive ? "bg-accent hover:bg-accent" : "bg-secondary",
                            )}
                        >
                            <div className="flex items-center gap-2 max-w-72">
                                <div>
                                    <Hash />
                                </div>
                                <div className="truncate">{channel.name}</div>
                            </div>
                        </Button>
                    </ContextMenuTrigger>
                    <ContextMenuContent>
                        <ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
                            Delete
                        </ContextMenuItem>
                    </ContextMenuContent>
                </ContextMenu>
            )}
        </NavLink>
    );
}

export default function ServerChannelListItem({ channel }: ChannelListItemProps) {
    switch (channel.type) {
        case ChannelType.SERVER_CATEGORY:
            return <ServerCategory channel={channel} />;
        case ChannelType.SERVER_VOICE:
            return <ServerVoice channel={channel} />;
        case ChannelType.SERVER_TEXT:
            return <ServerText channel={channel} />;
        default:
            return null;
    }
}