import { Avatar, Badge, Card, Flex, Separator, Text } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import { useAtomValue } from "jotai";
import { userAtom } from "../../AtomStore/AtomStore";
import { axiosLocalhost } from "../../api/axios/axios";

type TUserCard = {
    username?: string;
    userId?: string;
};

export default function UserCard(props: TUserCard) {
    const user = useAtomValue(userAtom);

    const { data } = useQuery({
        queryKey: [`userCard${props.userId}`],
        queryFn: async () => {
            const response = await axiosLocalhost.get(`/users/${props.userId}`);
            return response.data;
        },
        enabled: !!props.userId,
    });

    const getInitials = (username: string): string => {
        const result = username
            .split(" ")
            .map((word) => word[0].toUpperCase())
            .join("");

        return result;
    };

    const getUsername = (): string => {
        if (!user || props.username) return props.username || "Nothing";
        return user.username;
    };

    return (
        <Card>
            <Flex gap={"2"} direction={"column"}>
                <Flex direction={"row"} gap={"2"} align={"center"}>
                    <Avatar
                        fallback={<div>{getInitials(getUsername())}</div>}
                        radius="full"
                    />
                    <Flex className="flex-col ">
                        <Text>Test User</Text>
                        <Text size={"1"} color={"gray"}>
                            @testuser123
                        </Text>
                    </Flex>
                </Flex>
                <Separator size={"4"} />
                <Flex gap={"2"}>
                    <Badge>test</Badge>
                    <Badge color="amber">user</Badge>
                    <Badge color="red">admin</Badge>
                </Flex>
            </Flex>
        </Card>
    );
}