import AtaverSvg from "@/assets/icons/svg/ataver.svg";
import OwnerSvg from "@/assets/icons/svg/owner.svg";
import { RankingItem } from "@/types/user";
import { useState } from "react";
import { Image, ScrollView, StyleSheet, View } from "react-native";
import { ThemedText } from "../ThemedText";
interface IRankList {
    data: RankingItem[]
}
const RankList = (props: IRankList) => {

    return (
        <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, marginTop: 16 }}
        >
            <View style={styles.item}>
                <ThemedText style={styles.headerText} type="sfPro">Rank</ThemedText>
                <ThemedText style={styles.headerText} type="sfPro">Username</ThemedText>
                <ThemedText style={styles.headerText} type="sfPro">Profile</ThemedText>
            </View>
            {props.data?.filter((item, index) => index > 2).map((item, index) => (
                <View
                    key={index}
                    style={[
                        styles.item,
                        {
                            borderBottomWidth: index === props.data.length - 1 ? 0 : 1,
                            position: index == 1 ? 'relative' : 'static',
                        }
                    ]}
                >
                    {index === 1 && (
                        <View style={styles.self} className="w-self">
                            <OwnerSvg width="100%" height="100%" />
                        </View>
                    )}
                    <ThemedText style={styles.itemRank} type="sfPro">{index + 1}</ThemedText>
                    <ThemedText style={styles.itemName} type="inter">{item.user_nick_name}</ThemedText>
                    <View style={{ opacity: index == 1 ? 0 : 1 }}>
                        {(() => {
                            const [imageError, setImageError] = useState(false);

                            if (!item.user_avatar_url || imageError) {
                                return <AtaverSvg width={40} height={40} />;
                            }

                            return (
                                <Image
                                    source={{ uri: item.user_avatar_url }}
                                    style={{ width: 40, height: 40, borderRadius: 40 }}
                                    onError={() => setImageError(true)}
                                />
                            );
                        })()}
                    </View>
                </View>
            ))}
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    headerText: {
        fontSize: 12,
        color: "#4C320C",
        fontWeight: "500"
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderBottomColor: '#B48C64',
        height: 70,
        position: 'relative',
    },
    itemRank: {
        fontSize: 14,
        color: "#4C320C",
        fontWeight: "700"
    },
    itemName: {
        fontSize: 12,
        color: "#AC7E35",
    },
    self: {
        position: 'absolute',
        width: '100%',
        height: "100%",
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
        zIndex: -1,
    }
});
export default RankList;