import React, { useRef } from 'react';
import { Card, Text, View } from 'react-native-ui-lib';
import { Image } from 'react-native';
import images from '../../../themes/assets/images';
import colors from '../../rb-constants/colors';
import { ScrollView } from 'react-native-gesture-handler';
import { StyleSheet } from 'react-native';
import { Dimensions } from 'react-native';
import { Animated } from 'react-native';
import DateFormat from '../../rb-components/DateFormat';
import { useGetLatestReport } from '../../../hooks/query/report';
const { width } = Dimensions.get('screen');
const itemWidth = (width / 6) * 2;
const padding = (width - itemWidth) / 2;
const offset = itemWidth;
function Item({ i, scrollX, data }) {
const scale = scrollX.interpolate({
inputRange: [-offset + i * offset, i * offset, offset + i * offset],
outputRange: [0.8, 1.6, 0.8],
});
return (
<View>
<Animated.View style={[styles.item, { transform: [{ scale }] }]}>
<View flex row spread centerV>
<View style={{ backgroundColor: colors.white, height: itemWidth, width: itemWidth }}>
<View center>
<Image source={data.image} />
</View>
<View center flex>
<Text>{data.name}</Text>
<Text orange40 heading3>{data.followers}</Text>
</View>
</View>
</View>
</Animated.View>
</View>
);
}
function SocialFollowing() {
const { data: report } = useGetLatestReport();
const scrollX = useRef(new Animated.Value(0)).current;
// console.log(report?.data?.score?.social?.find((s: { type: string; }) => s.type === 'facebook'))
// console.log(report?.data?.score?.social[1]?.find((s: { type: string; }) => s.type === 'instagram'))
// console.log(report?.data?.score?.social[2]?.find(((s: { type: string; }) => s.type === 'twitter'))
// console.log(report?.data?.score?.social[3]?.find((s: { type: string; }) => s.type === 'linkedin'))
// console.log(report?.data?.score?.social[4]?.find((s: { type: string; }) => s.type === 'youtube'))
// console.log(report?.data?.score?.social[5]?.find(s => s.type === 'tiktok'))
const cardData = [
{ name: 'Facebook', followers: (report?.data?.score?.social[0]?.numberOfFollowers ?? "N/A"), image: images.facebook },
{ name: 'Instagram', followers: (report?.data?.score?.social[1]?.numberOfFollowers ?? "N/A"), image: images.instagram },
{ name: 'Twitter', followers: (report?.data?.score?.social[2]?.numberOfFollowers ?? "N/A"), image: images.twitter },
{ name: 'Linkedin', followers: (report?.data?.score?.social[3]?.numberOfFollowers ?? "N/A"), image: images.linkedin },
{ name: 'Tiktok', followers: (report?.data?.score?.social[4]?.numberOfFollowers ?? "N/A"), image: images.tiktok },
{ name: 'Youtube', followers: (report?.data?.score?.social[5]?.numberOfFollowers ?? "N/A"), image: images.youtube },
];
return (
<>
<View flex-1 centerV spread>
<View center flex-1 spread>
<Card borderRadius={20} padding-20 marginT-10 style={{ borderWidth: 1, borderColor: colors.grey, height: 120, width: width - 60 }}>
<View paddingH-8 centerH centerV flex-1>
<Text style={{ fontSize: 40 }} orange40 initials>
{report?.socialMedia?.followers}
</Text>
<Text grey10 digits3>
Total Social Following
</Text>
</View>
</Card>
</View>
<ScrollView
horizontal
pagingEnabled
contentContainerStyle={styles.scrollView}
showsHorizontalScrollIndicator={false}
snapToInterval={offset}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: false,
})}
>
{cardData.map((data, i) => (
<Item key={i} i={i} scrollX={scrollX} data={data} />
))}
</ScrollView>
</View>
<DateFormat />
</>
);
}
export default SocialFollowing;
const styles = StyleSheet.create({
scrollView: {
paddingHorizontal: 115,
alignItems: 'center',
},
item: {
height: itemWidth,
width: itemWidth,
borderRadius: 10,
},
});