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

    const getData = (socialMediaData: any, reportType: any) => {
        const socialType = socialMediaData.type;
        if (socialMediaData.status === 'EXIST') {
            if (socialType === 'linkedin') {
                const pageInsights = socialMediaData.pageInsights;

                let totalClicks = 0;
                let careerPageClicks = null;
                let websiteClicks = 0;
                let desktopWebsiteClicks = null;
                let mobileWebsiteClicks = null;
                let diffCareerPageClicks = 0;
                let diffDesktopWebsiteClicks = 0;
                let diffMobileWebsiteClicks = 0;

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

                let reach = 0;

                let postCount = null;
                const postReach = socialMediaData.totalMediaReach;

                const avgPostReach = parseFloat(
                    socialMediaData.averagePostReach,
                ).toFixed(2);
                let diffPostCount = 0;
                const diffPostReach = socialMediaData.totalMediaReachChange;
                const diffAvgPostReach = socialMediaData.averagePostReachChange
                    ? 0
                    : parseFloat(socialMediaData.averagePostReachChange).toFixed(2);

                let impressions = 0;

                const postImpressions = socialMediaData.totalMediaImpressions;

                const avgPostImpressions = parseFloat(
                    socialMediaData.averagePostImpressions,
                ).toFixed(2);
                const mostPostImpressions = socialMediaData.mostPostImpressions;
                const lowestPostImpressions = socialMediaData.lowestPostImpressions;
                const diffPostImpressions = socialMediaData.totalMediaImpressionsChange;
                const diffAvgPostImpressions = socialMediaData.averagePostImpressionsChange
                    ? 0
                    : parseFloat(socialMediaData.averagePostImpressionsChange).toFixed(2);
                const diffMostPostImpressions =
                    socialMediaData.mostPostImpressionsChange;
                const diffLowestPostImpressions =
                    socialMediaData.lowestPostImpressionsChange;

                let profileViews = 0;
                let desktopProfileViews = 0;
                let mobileProfileViews = 0;
                let diffDesktopProfileViews = 0;
                let diffMobileProfileViews = 0;

                if (pageInsights) {
                    profileViews = pageInsights.profileViews;
                    desktopProfileViews = pageInsights.desktopProfileViews;
                    mobileProfileViews = pageInsights.mobileProfileViews;
                    diffDesktopProfileViews = pageInsights.desktopProfileViewsChange;
                    diffMobileProfileViews = pageInsights.mobileProfileViewsChange;
                    impressions = pageInsights.sharesImpressions;
                    reach = pageInsights.sharesReach;
                    careerPageClicks = pageInsights.careerPageClicks;
                    desktopWebsiteClicks = pageInsights.desktopWebsiteClicks;
                    mobileWebsiteClicks = pageInsights.mobileWebsiteClicks;
                    diffCareerPageClicks = pageInsights.careerPageClicksChange;
                    diffDesktopWebsiteClicks = pageInsights.desktopWebsiteClicksChange;
                    diffMobileWebsiteClicks = pageInsights.mobileWebsiteClicksChange;
                }

                if (reportType === 'MONTHLY') {
                    likes = socialMediaData.likesLastMonth;
                    comments = socialMediaData.commentLastMonth;
                    shares = socialMediaData.sharesLastMonth;
                    postCount = socialMediaData.numberOfPostsLastMonth;
                    diffLikes = likes - socialMediaData.likesPastMonth;
                    diffComments = comments - socialMediaData.commentPastMonth;
                    diffShares = shares - socialMediaData.sharesPastMonth;
                    diffPostCount = postCount - socialMediaData.numberOfPostsPastMonth;

                } else {
                    likes = socialMediaData.likesLastWeek;
                    comments = socialMediaData.commentLastWeek;
                    shares = socialMediaData.sharesLastWeek;
                    postCount = socialMediaData.numberOfPostsLastWeek;
                    diffLikes = likes - socialMediaData.likesPastWeek;
                    diffComments = comments - socialMediaData.commentPastWeek;
                    diffShares = shares - socialMediaData.sharesPastWeek;
                    diffPostCount = postCount - socialMediaData.numberOfPostsPastWeek;
                }

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

                if (desktopWebsiteClicks) {
                    websiteClicks += desktopWebsiteClicks;
                }
                if (mobileWebsiteClicks) {
                    websiteClicks += mobileWebsiteClicks;
                }

                totalClicks += websiteClicks;
                if (careerPageClicks) {
                    totalClicks += careerPageClicks;
                }

                return [
                    {
                        header: messages.profileVisits.defaultMessage,
                        value: profileViews,
                        subvalues: [
                            {
                                header: messages.desktopProfileViews.defaultMessage,
                                value: desktopProfileViews,
                                diffValue: diffDesktopProfileViews,
                            },
                            {
                                header: messages.mobileProfileViews.defaultMessage,
                                value: mobileProfileViews,
                                diffValue: diffMobileProfileViews,
                            },
                        ],
                    },
                    {
                        header: messages.impressions.defaultMessage,
                        value: impressions,
                        subvalues: [
                            {
                                header: messages.postCount.defaultMessage,
                                value: postCount,
                                diffValue: diffPostCount,
                            },
                            {
                                header: messages.linkedinPostImpressions.defaultMessage,
                                value: postImpressions,
                                diffValue: diffPostImpressions,
                            },
                            {
                                header: messages.linkedinAvgPostImpressions.defaultMessage,
                                value: avgPostImpressions,
                                diffValue: diffAvgPostImpressions,
                            },
                            {
                                header: messages.highestPostImpressions.defaultMessage,
                                value: mostPostImpressions,
                                diffValue: diffMostPostImpressions,
                            },
                            {
                                header: messages.lowestPostImpressions.defaultMessage,
                                value: lowestPostImpressions,
                                diffValue: diffLowestPostImpressions,
                            },
                        ],
                    },
                    {
                        header: messages.reach.defaultMessage,
                        value: reach,
                        subvalues: [
                            {
                                header: messages.postCount.defaultMessage,
                                value: postCount,
                                diffValue: diffPostCount,
                            },
                            {
                                header: messages.postReach.defaultMessage,
                                value: postReach,
                                diffValue: diffPostReach,
                            },
                            {
                                header: messages.avgPostReach.defaultMessage,
                                value: avgPostReach,
                                diffValue: diffAvgPostReach,
                            },
                        ],
                    },
                    {
                        header: messages.totalInteractions.defaultMessage,
                        value: totalInteractions,
                        subvalues: [
                            {
                                header: messages.likes.defaultMessage,
                                value: likes,
                                diffValue: diffLikes,
                            },
                            {
                                header: messages.comments.defaultMessage,
                                value: comments,
                                diffValue: diffComments,
                            },
                            {
                                header: messages.shares.defaultMessage,
                                value: shares,
                                diffValue: diffShares,
                            },
                        ],
                    },
                    {
                        header: messages.buttonTaps.defaultMessage,
                        value: totalClicks,
                        subvalues: [
                            {
                                header: messages.careerPageTaps.defaultMessage,
                                value: careerPageClicks,
                                diffValue: diffCareerPageClicks,
                            },
                            {
                                header: messages.websiteTaps.defaultMessage,
                                value: websiteClicks,
                                diffValue: null,
                            },
                            {
                                header: messages.desktopWebsiteTaps.defaultMessage,
                                value: desktopWebsiteClicks,
                                diffValue: diffDesktopWebsiteClicks,
                            },
                            {
                                header: messages.mobileWebsiteTaps.defaultMessage,
                                value: mobileWebsiteClicks,
                                diffValue: diffMobileWebsiteClicks,
                            },
                        ],
                    },
                ];
            }
        }
    }

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