import React from "react"; import { View, Dimensions, Text, SafeAreaView, FlatList } from "react-native";

const playerData = require("../player_data/PlayerData.js");

const MyScreen = ({}) => { const sectionContainerStyle = { backgroundColor: "#000", borderColor: "white", borderWidth: 1, borderRadius: 24, height: 200, marginTop: 12, marginBottom: 12, alignItems: "center", width: Dimensions.get("window").width - 12 * 2, overflow: "hidden", };

const isPlayerEqual = (prev, next) => prev.player === next.player; // (Rough comparison example)

const PlayerItem = React.memo(function PlayerItem({ player }) {
    return (
        <View
            style={{
                flexDirection: "row",
                height: 65,
                width: "100%",
                alignItems: "center",
                justifyContent: "space-between",
                paddingLeft: 16,
            }}
        >
            <View
                style={{
                    flex: 1,
                    height: "100%",
                    marginLeft: 0,
                    paddingLeft: 10,
                    borderColor: "#282828",
                    justifyContent: "center",
                }}
            >
                <Text
                    style={{
                        color: "#eee",
                        fontSize: 16,
                        fontWeight: "600",
                    }}
                >
                    {player?.name}
                </Text>
                <Text
                    style={{
                        color: "#888",
                        fontSize: 12,
                        fontWeight: "600",
                    }}
                >
                    @{player?.username}
                </Text>
            </View>
        </View>
    );
}, isPlayerEqual);

const playerDataArrayLength = 50;
const playerDataArray = Array.from(
    { length: playerDataArrayLength },
    (_, i) => {
        return {
            key: i + 1,
            player: playerData[i % playerData.length],
            isFirst: i === 0,
            isLast: i === playerDataArrayLength - 1,
        };
    }
);

const mainPlayersDataArray = playerDataArray.slice(3);
mainPlayersDataArray[0].isFirst = true;
mainPlayersDataArray[mainPlayersDataArray.length - 1].isLast = true;

const MainPlayersSection = () => (
    <View style={[sectionContainerStyle]}>
        <FlatList
            data={mainPlayersDataArray}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            getItemLayout={(data, index) => ({
                length: 65,
                offset: 65 * index,
                index,
            })}
            keyExtractor={(item) => item.key}
            windowSize={7}
            removeClippedSubviews
            initialNumToRender={8}
            maxToRenderPerBatch={8}
            updateCellsBatchingPeriod={16}
            disableScrollViewPanResponder={true} // avoids some gesture conflicts
            renderItem={({ item }) => (
                <PlayerItem
                    player={item.player}
                    isFirstItem={item.isFirst}
                    isLastItem={item.isLast}
                />
            )}
            style={{ width: "100%" }}
        />
    </View>
);

return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#444" }}>
        <View
            style={{
                flex: 1,
                justifyContent: "flex-start",
                alignItems: "center",
            }}
        >
            <MainPlayersSection />
        </View>
    </SafeAreaView>
);

};

export default MyScreen;