Untitled

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;