import UserSvg from '@/assets/icons/svg/ataver.svg';
import { ThemedText } from '@/components/ThemedText';
import { UserInfoDetails } from '@/types/user';
import { useState } from 'react';
import { Image, ScrollView, View } from 'react-native';
export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
    // 添加状态来跟踪图片加载状态
    const [imageError, setImageError] = useState(false);
    return (
        <View className='flex flex-row justify-between items-center mt-[1rem] gap-[1rem] w-full'>
            {/* 用户名 */}
            <View className='flex flex-col gap-4 w-[75%]'>
                <View className='flex flex-row items-center justify-between w-full'>
                    <View className='flex flex-row items-center gap-2 w-full'>
                        <ThemedText
                            className='max-w-[80%] !text-textSecondary !font-semibold !text-2xl'
                            numberOfLines={1}         // 限制为1行
                            ellipsizeMode="tail"
                        >
                            {userInfo?.user_info?.nickname}
                        </ThemedText>
                        <ScrollView
                            className='max-w-[20%]'
                            horizontal // 水平滚动
                            showsHorizontalScrollIndicator={false} // 隐藏滚动条
                            contentContainerStyle={{
                                flexDirection: 'row',
                                gap: 8, // 间距，
                                alignItems: 'center',
                            }}
                        >
                            {
                                userInfo?.medal_infos?.map((item, index) => (
                                    <Image
                                        key={index}
                                        source={{ uri: item.url }}
                                        style={{ width: 24, height: 24 }}
                                    />
                                ))
                            }
                        </ScrollView>
                    </View>
                </View>
                <View>
                    <ScrollView
                        className='max-w-[85%]'
                        horizontal // 水平滚动
                        showsHorizontalScrollIndicator={false} // 隐藏滚动条
                        contentContainerStyle={{
                            flexDirection: 'row',
                            gap: 8 // 间距
                        }}
                    >
                        <ThemedText style={{ color: '#AC7E35', fontSize: 12, fontWeight: '600' }}>User ID： {userInfo?.user_info?.user_id}</ThemedText>
                    </ScrollView>
                    {/* <CopyButton textToCopy={userInfo?.user_info?.user_id || ""} /> */}
                </View>

            </View>
            {/* 头像 */}
            <View className='w-auto'>
                {userInfo?.user_info?.avatar_file_url && !imageError ? (
                    <Image
                        source={{ uri: userInfo.user_info.avatar_file_url }}
                        style={{ width: 80, height: 80, borderRadius: 40 }}
                        onError={() => {
                            console.log('图片加载失败:', userInfo.user_info.avatar_file_url);
                            setImageError(true);
                        }}
                        onLoad={() => {
                            console.log('图片加载成功');
                        }}
                    />
                ) : (
                    <UserSvg width={80} height={80} />
                )}
            </View>
        </View >
    );
}