import React from 'react';
import { Card, Carousel, Text, View } from 'react-native-ui-lib';
import { Image } from 'react-native';
import colors from '../../../rb-constants/colors';
import { abbreviateNumber } from '../../../../utils/number_formatter'
import Icon from 'react-native-vector-icons/FontAwesome';
import messages from './messages';
import images from '../../../rb-constants/images';
type Props = {
report: any;
company?: any;
};
const OverviewTwitter = ({ report, company }: Props) => {
const socialMediaType = "twitter";
const getData = (socialMediaData: any, reportType: any) => {
const socialType = socialMediaData.type;
if (socialMediaData.status === 'EXIST') {
if (socialType === 'twitter') {
const mentions = socialMediaData.sortedMentions;
const mentionsCount = mentions.length;
const mentionsSubvalues = [];
if (mentionsCount > 0) {
for (let i = 0; i < mentionsCount; i += 1) {
if (i < 20) {
mentionsSubvalues.push({
header: `${i + 1}- @${mentions[i]}`,
description: null,
value: null,
diffValue: null,
});
} else {
break;
}
}
} else {
mentionsSubvalues.push({
header: null,
description: null,
value: null,
diffValue: null,
});
}
const trends = socialMediaData.sortedHashtags;
const trendsCount = trends.length;
const trendSubvalues = [];
if (trendsCount > 0) {
for (let i = 0; i < trendsCount; i += 1) {
if (i < 20) {
trendSubvalues.push({
header: `${i + 1}- #${trends[i]}`,
description: null,
value: null,
diffValue: null,
});
} else {
break;
}
}
} else {
trendSubvalues.push({
header: null,
description: null,
value: null,
diffValue: null,
});
}
let likes = 0;
let retweets = 0;
let comments = 0;
let quotes = 0;
let diffLikes = 0;
let diffRetweets = 0;
let diffComments = 0;
let diffQuotes = 0;
if (reportType === 'MONTHLY') {
likes = socialMediaData.likesLastMonth;
retweets = socialMediaData.sharesLastMonth;
comments = socialMediaData.commentLastMonth;
quotes = socialMediaData.quotesLastMonth;
diffLikes = likes - socialMediaData.likesPastMonth;
diffRetweets = retweets - socialMediaData.sharesPastMonth;
diffComments = comments - socialMediaData.commentPastMonth;
diffQuotes = quotes - socialMediaData.quotesPastMonth;
} else {
likes = socialMediaData.likesLastWeek;
retweets = socialMediaData.sharesLastWeek;
comments = socialMediaData.commentLastWeek;
quotes = socialMediaData.quotesLastWeek;
diffLikes = likes - socialMediaData.likesPastWeek;
diffRetweets = retweets - socialMediaData.sharesPastWeek;
diffComments = comments - socialMediaData.commentPastWeek;
diffQuotes = quotes - socialMediaData.quotesPastWeek;
}
let totalInteractions = 0;
if (likes) {
totalInteractions += likes;
}
if (retweets) {
totalInteractions += retweets;
}
if (comments) {
totalInteractions += comments;
}
if (quotes) {
totalInteractions += quotes;
}
const followers = socialMediaData.numberOfFollowers;
const historicFollowers = socialMediaData.followers;
let diffFollowers = 0;
if (historicFollowers && historicFollowers.values.length > 0) {
diffFollowers =
followers -
historicFollowers.values[historicFollowers.values.length - 1].y;
}
let subvalueHeader = `${messages.gain.defaultMessage} / ${messages.loss.defaultMessage
}`;
if (diffFollowers < 0) {
subvalueHeader = messages.loss.defaultMessage;
} else if (diffFollowers > 0) {
subvalueHeader = messages.gain.defaultMessage;
}
const symbol = diffFollowers < 1 ? '' : '+';
return [
{
header: messages.numberOfFollowers.defaultMessage,
value: followers,
subvalues: [
{
header: subvalueHeader,
value: symbol + diffFollowers,
diffValue: null,
},
],
},
{
header: messages.totalInteractions.defaultMessage,
value: totalInteractions,
subvalues: [
{
header: messages.likes.defaultMessage,
value: likes,
diffValue: diffLikes,
},
{
header: messages.retweets.defaultMessage,
value: retweets,
diffValue: diffRetweets,
},
{
header: messages.comments.defaultMessage,
value: comments,
diffValue: diffComments,
},
{
header: messages.quotes.defaultMessage,
value: quotes,
diffValue: diffQuotes,
},
],
},
{
header: messages.mentions.defaultMessage,
value: mentionsCount,
subvalues: mentionsSubvalues,
},
{
header: messages.trends.defaultMessage,
value: trendsCount,
subvalues: trendSubvalues,
},
];
}
}
}
const connectionCheck = (connectList: any, type: any) => {
let isConnection = false;
if (connectList && connectList.length > 0) {
connectList.forEach((item: any) => {
if (item.type === type) {
isConnection = item.connect;
}
});
}
return isConnection;
}
const reportType = report?.data && report?.data?.type;
const social = report?.data && report?.data?.score && report?.data?.score.social;
const connectList = report?.data && report?.data?.connectList;
const isConnectionError = !connectionCheck(
connectList,
socialMediaType.toUpperCase(),
);
const socialMediaData =
social && social.find((obj: any) => obj.type === socialMediaType);
let isError = false;
let errorMessageType;
if (isConnectionError) {
errorMessageType = `${socialMediaType.toLowerCase()}ErrorMessage`;
} else if (
!socialMediaData ||
socialMediaData.status !== 'EXIST' ||
!reportType
) {
isError = true;
errorMessageType = 'companySocialNotExist';
}
let datas = [];
if (!isError && !isConnectionError) {
datas = getData(socialMediaData, reportType);
}
return (
datas?.length > 0 ? (
<View>
<Carousel>
{
datas.map((item) => (
<>
<Card center>
<Text center grey40 text40BO>
{item.header}
</Text>
<Text orange40 text10BO>
{abbreviateNumber(item.value)}
</Text>
</Card>
{item.subvalues.map((item: any) => (
<Card centerH row >
<>
<View center flex>
<Text text60BO>
{item.header}
</Text>
</View>
<View flex>
<Text center orange40 text30BO >
{abbreviateNumber(item.value)}
</Text>
</View>
{
item.diffValue > 0 ? (
<View flex centerH row center>
<Icon
name="arrow-up"
color={colors.Green}
size={25}
style={{ marginRight: 5 }}
/>
<Text green30 text40BO>
{item.diffValue}
</Text>
</View>
) : item.diffValue < 0 ? (
<View flex row center>
<Icon
name="arrow-down"
color={colors.RedLighter}
style={{ marginRight: 5 }}
size={25}
/>
<Text red40 text40BO>
{parseFloat(item.diffValue).toFixed(0)}
</Text>
</View>
) : (
<View row flex centerH center>
<Text grey40 text20BO>
-
</Text>
</View>
)
}
</>
</Card>
))}
</>
))
}
</Carousel>
</View>
) : (
<View center margin-20><Text heading4 grey30>"Please connect your social media account to see the post."</Text>
<Image style={{ width: 100, height: 100 }} source={images.warning} />
</View>
)
)
}
export default OverviewTwitter;