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 OverviewTiktok = ({ report, company }: Props) => {
    const socialMediaType = "tiktok";

    const getData = (socialMediaData: any, reportType: any) => {
        const socialType = socialMediaData.type;
        if (socialMediaData.status === 'EXIST') {
            if (socialType === 'tiktok') {
                const hashtags = socialMediaData.sortedHashtags;
                const hashtagsCount = hashtags.length;
                const hashtagsSubvalues = [];

                if (hashtagsCount > 0) {
                    for (let i = 0; i < hashtagsCount; i += 1) {
                        if (i < 20) {
                            hashtagsSubvalues.push({
                                header: `${i + 1}- #${hashtags[i]}`,
                                description: null,
                                value: null,
                                diffValue: null,
                            });
                        } else {
                            break;
                        }
                    }
                } else {
                    hashtagsSubvalues.push({
                        header: null,
                        description: null,
                        value: null,
                        diffValue: null,
                    });
                }

                const pageInsights = socialMediaData.pageInsights;

                let totalInteractions = 0;
                let likes = null;
                let comments = null;
                let shares = null;
                let diffLikes = 0;
                let diffComments = 0;
                let diffShares = 0;

                let videoViews = null;
                let diffVideoViews = 0;


                if (pageInsights) {
                    videoViews = pageInsights.videoViews;
                    diffVideoViews = videoViews - pageInsights.videoViewsChange;
                }

                if (reportType === 'MONTHLY') {
                    likes = socialMediaData.likesLastMonth;
                    comments = socialMediaData.commentLastMonth;
                    shares = socialMediaData.sharesLastMonth;
                    diffLikes = likes - socialMediaData.likesPastMonth;
                    diffComments = comments - socialMediaData.commentPastMonth;
                    diffShares = shares - socialMediaData.sharesPastMonth;
                } else {
                    likes = socialMediaData.likesLastWeek;
                    comments = socialMediaData.commentLastWeek;
                    shares = socialMediaData.sharesLastWeek;
                    diffLikes = likes - socialMediaData.likesPastWeek;
                    diffComments = comments - socialMediaData.commentPastWeek;
                    diffShares = shares - socialMediaData.sharesPastWeek;
                }

                if (likes) {
                    totalInteractions += likes;
                }
                if (comments) {
                    totalInteractions += comments;
                }
                if (shares) {
                    totalInteractions += shares;
                }

                if (videoViews) {
                    totalInteractions += videoViews;
                }

                return [
                    {
                        header: messages.trends.defaultMessage,
                        value: hashtagsCount,
                        subvalues: hashtagsSubvalues,
                    },
                    {
                        header: messages.totalInteractions.defaultMessage,
                        description: null,
                        value: totalInteractions,
                        subvalues: [
                            {
                                header: messages.videoViews.defaultMessage,
                                value: videoViews,
                                diffValue: diffVideoViews,
                            },
                            {
                                header: messages.likes.defaultMessage,
                                value: likes,
                                diffValue: diffLikes,
                            },
                            {
                                header: messages.comments.defaultMessage,
                                value: comments,
                                diffValue: diffComments,
                            },
                            {
                                header: messages.shares.defaultMessage,
                                value: shares,
                                diffValue: diffShares,
                            },
                        ],
                    },
                ];
            }
        }
    }

    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);
    } else {
        // datas = generateErrorObject(socialMediaType);
    }


    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 OverviewTiktok;