import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
import { Avatar, Flex, MantineColor, Text } from "@mantine/core";
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
import { OnlineState } from "@/app/providers/ProtocolProvider/protocol/packets/packet.onlinestate";
import { UserInformation } from "@/app/providers/InformationProvider/InformationProvider";

export enum AdditionalType {
    ONLINE,
    USERNAME
}

export interface UserRowProps {
    publicKey: string;
    rightSection?: (publicKey: string) => React.ReactNode;
    onClick?: (userInfo: UserInformation) => void;
    renderCondition?: (userInfo: UserInformation) => boolean;
    additionalType?: AdditionalType;
    bg?: MantineColor;
}

export function UserRow(props: UserRowProps) {
    const [userInfo] = useUserInformation(props.publicKey);
    const avatars = useAvatars(props.publicKey, false);
    const colors = useRosettaColors();

    if(props.renderCondition && !props.renderCondition(userInfo)) {
        return null;
    }

    return (
        <Flex justify={'space-between'} bg={props.bg} align={'center'} p={'xs'} 
            style={{ 
                borderBottom: '1px solid var(--rosetta-border-color)',
                cursor: props.onClick ? 'pointer' : 'default' 
            }}>
            <Flex align={'center'} direction={'row'} gap={10}>
                <Avatar
                    radius="xl"
                    name={userInfo.title}
                    color={'initials'}
                    src={avatars.length > 0 ? avatars[0].avatar : undefined}
                />
                <Flex direction={'column'}>
                    <Flex justify={'row'} align={'center'} gap={3}>
                        <Text size="sm" fw={500}>{userInfo.title}</Text>
                        <VerifiedBadge size={17} verified={userInfo.verified}></VerifiedBadge>
                    </Flex>
                    {!props.additionalType && (
                        <Text size={'xs'} c={userInfo.online == OnlineState.ONLINE ? colors.success : 'dimmed'}>{userInfo.online == OnlineState.ONLINE ? 'online' : 'offline'}</Text>
                    )}
                    {props.additionalType === AdditionalType.ONLINE && (
                        <Text size={'xs'} c={userInfo.online == OnlineState.ONLINE ? colors.success : 'dimmed'}>{userInfo.online == OnlineState.ONLINE ? 'online' : 'offline'}</Text>
                    )}
                    {props.additionalType === AdditionalType.USERNAME && (
                        <Text size={'xs'} c={'dimmed'}>@{userInfo.username}</Text>
                    )}
                </Flex>
            </Flex>
            {props.rightSection && (
                <Flex align={'center'} style={{
                    cursor: 'pointer'
                }} gap={'xs'} justify={'center'}>
                    {props.rightSection(props.publicKey)}
                </Flex>
            )}
        </Flex>
    );
}