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 OverviewYoutube = ({ report, company }: Props) => {
    const socialMediaType = "youtube";
    const secondsToHms = (d) => {
        d = Number(d);
        const h = Math.floor(d / 3600);
        const m = Math.floor((d % 3600) / 60);
        const s = Math.floor((d % 3600) % 60);

        const hDisplay = h < 10 ? `0${h}:` : `${h}:`;
        const mDisplay = m < 10 ? `0${m}:` : `${m}:`;
        const sDisplay = s < 10 ? `0${s}` : s;

        return hDisplay + mDisplay + sDisplay;
    }
    const getData = (socialMediaData: any, reportType: any) => {
        const socialType = socialMediaData.type;
        if (socialMediaData.status === 'EXIST') {
            if (socialType === 'youtube') {
                const pageInsights = socialMediaData.pageInsights;

                let totalClicks = 0;
                let cardClicks = null;
                let annotationClicks = null;
                let diffCardClicks = 0;
                let diffAnnotationClicks = 0;

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

                let videoViews = null;
                let videoCount = null;
                let desktopVideoViews = null;
                let mobileVideoViews = null;
                let tabletVideoViews = null;
                let tvVideoViews = null;
                let averageVideoViewDuration = 0;
                let averageVideoViewPercentage = null;
                let mostVideoViews = null;

                let lowestVideoViews = null;

                let diffVideoCount = 0;
                let diffDesktopVideoViews = 0;
                let diffMobileVideoViews = 0;
                let diffTabletVideoViews = 0;
                let diffTvVideoViews = 0;
                let diffAverageVideoViewDuration = 0;
                let diffAverageVideoViewPercentage = 0;
                let diffMostVideoViews = 0;
                let diffLowestVideoViews = 0;

                let totalImpressions = 0;
                let adImpressions = null;
                let annotationImpressions = null;
                let annotationClickableImpressions = null;
                let cardImpressions = null;
                let cardTeaserImpressions = null;
                let diffAdImpressions = 0;
                let diffAnnotationImpressions = 0;
                let diffAnnotationClickableImpressions = 0;
                let diffCardImpressions = 0;
                let diffCardTeaserImpressions = 0;

                const subscriberCount = socialMediaData.numberOfFollowers;
                let subscribersGained = null;
                let subscribersLost = null;
                let diffSubscribersGained = 0;
                let diffSubscribersLost = 0;

                if (pageInsights) {
                    cardClicks = pageInsights.cardClicks;
                    annotationClicks = pageInsights.annotationClicks;
                    dislikes = pageInsights.videoDislikes;
                    videoViews = pageInsights.videoViews;
                    desktopVideoViews = pageInsights.desktopVideoViews;
                    mobileVideoViews = pageInsights.mobileVideoViews;
                    tabletVideoViews = pageInsights.tabletVideoViews;
                    tvVideoViews = pageInsights.tvVideoViews;
                    averageVideoViewDuration = secondsToHms(
                        pageInsights.averageVideoViewDuration,
                    );
                    averageVideoViewPercentage = pageInsights.averageVideoViewPercentage;
                    mostVideoViews = pageInsights.mostVideoViews;
                    lowestVideoViews = pageInsights.lowestVideoViews;
                    adImpressions = pageInsights.adImpressions;
                    annotationImpressions = pageInsights.annotationImpressions;
                    annotationClickableImpressions =
                        pageInsights.annotationClickableImpressions;
                    cardImpressions = pageInsights.cardImpressions;
                    cardTeaserImpressions = pageInsights.cardTeaserImpressions;
                    subscribersGained = pageInsights.subscribersGained;
                    subscribersLost = pageInsights.subscribersLost;

                    diffCardClicks = pageInsights.cardClicksChange;
                    diffAnnotationClicks = pageInsights.annotationClicksChange;
                    diffDislikes = pageInsights.videoDislikesChange;
                    diffDesktopVideoViews = pageInsights.desktopVideoViewsChange;
                    diffMobileVideoViews = pageInsights.mobileVideoViewsChange;
                    diffTabletVideoViews = pageInsights.tabletVideoViewsChange;
                    diffTvVideoViews = pageInsights.tvVideoViewsChange;
                    diffAverageVideoViewDuration =
                        pageInsights.averageVideoViewDurationChange;
                    diffAverageVideoViewPercentage =
                        pageInsights.averageVideoViewPercentageChange;
                    diffMostVideoViews = pageInsights.mostVideoViewsChange;
                    diffLowestVideoViews = pageInsights.lowestVideoViewsChange;
                    diffAdImpressions = pageInsights.adImpressionsChange;
                    diffAnnotationImpressions = pageInsights.annotationImpressionsChange;
                    diffAnnotationClickableImpressions =
                        pageInsights.annotationClickableImpressionsChange;
                    diffCardImpressions = pageInsights.cardImpressionsChange;
                    diffCardTeaserImpressions = pageInsights.cardTeaserImpressionsChange;
                    diffSubscribersGained = pageInsights.subscribersGainedChange;
                    diffSubscribersLost = pageInsights.subscribersLostChange;
                }

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

                if (cardClicks) {
                    totalClicks += cardClicks;
                }
                if (annotationClicks) {
                    totalClicks += annotationClicks;
                }

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

                if (adImpressions) {
                    totalImpressions += adImpressions;
                }
                if (annotationImpressions) {
                    totalImpressions += annotationImpressions;
                }
                if (annotationClickableImpressions) {
                    totalImpressions += annotationClickableImpressions;
                }
                if (cardImpressions) {
                    totalImpressions += cardImpressions;
                }
                if (cardTeaserImpressions) {
                    totalImpressions += cardTeaserImpressions;
                }

                return [
                    {
                        header: messages.numberOfSubscriber.defaultMessage,
                        value: subscriberCount,
                        subvalues: [
                            {
                                header: messages.gain.defaultMessage,
                                value: subscribersGained,
                                diffValue: diffSubscribersGained,
                            },
                            {
                                header: messages.loss.defaultMessage,
                                value: subscribersLost,
                                diffValue: diffSubscribersLost,
                            },
                        ],
                    },
                    {
                        header: messages.impressions.defaultMessage,
                        value: totalImpressions,
                        subvalues: [
                            {
                                header: messages.annotationImpressions.defaultMessage,
                                value: annotationImpressions,
                                diffValue: diffAnnotationImpressions,
                            },
                            {
                                header: messages.annotationClickableImpressions.defaultMessage,
                                value: annotationClickableImpressions,
                                diffValue: diffAnnotationClickableImpressions,
                            },
                            {
                                header: messages.cardImpressions.defaultMessage,
                                value: cardImpressions,
                                diffValue: diffCardImpressions,
                            },
                            {
                                header: messages.cardTeaserImpressions.defaultMessage,
                                value: cardTeaserImpressions,
                                diffValue: diffCardTeaserImpressions,
                            },
                            {
                                header: messages.adImpressions.defaultMessage,
                                value: adImpressions,
                                diffValue: diffAdImpressions,
                            },
                        ],
                    },
                    {
                        header: messages.videoViews.defaultMessage,
                        value: videoViews,
                        subvalues: [
                            {
                                header: messages.desktopVideoViews.defaultMessage,
                                value: desktopVideoViews,
                                diffValue: diffDesktopVideoViews,
                            },
                            {
                                header: messages.mobileVideoViews.defaultMessage,
                                value: mobileVideoViews,
                                diffValue: diffMobileVideoViews,
                            },
                            {
                                header: messages.tabletVideoViews.defaultMessage,
                                value: tabletVideoViews,
                                diffValue: diffTabletVideoViews,
                            },
                            {
                                header: messages.tvVideoViews.defaultMessage,
                                value: tvVideoViews,
                                diffValue: diffTvVideoViews,
                            },
                            {
                                header: messages.averageVideoViewDuration.defaultMessage,
                                value: averageVideoViewDuration,
                                diffValue: diffAverageVideoViewDuration,
                            },
                            {
                                header: messages.averageVideoViewPercentage.defaultMessage,
                                value: averageVideoViewPercentage,
                                diffValue: diffAverageVideoViewPercentage,
                            },
                            {
                                header: messages.videoCount.defaultMessage,
                                value: videoCount,
                                diffValue: diffVideoCount,
                            },
                            {
                                header: messages.highestVideoViews.defaultMessage,
                                value: mostVideoViews,
                                diffValue: diffMostVideoViews,
                            },
                            {
                                header: messages.lowestVideoViews.defaultMessage,
                                value: lowestVideoViews,
                                diffValue: diffLowestVideoViews,
                            },
                        ],
                    },
                    {
                        header: messages.totalInteractions.defaultMessage,
                        value: totalInteractions,
                        subvalues: [
                            {
                                header: messages.likes.defaultMessage,
                                value: likes,
                                diffValue: diffLikes,
                            },
                            {
                                header: messages.dislikes.defaultMessage,
                                value: dislikes,
                                diffValue: diffDislikes,
                            },
                            {
                                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.cardClicks.defaultMessage,
                                value: cardClicks,
                                diffValue: diffCardClicks,
                            },
                            {
                                header: messages.annotationClicks.defaultMessage,
                                value: annotationClicks,
                                diffValue: diffAnnotationClicks,
                            },
                        ],
                    },
                ];
            }
        }
    }

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