Untitled

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState, useEffect } from 'react';
import Swiper from 'react-native-swiper';
import { StyleSheet } from 'react-native';
import { View, Text, Card } from 'react-native-ui-lib';
import colors from '../../rb-constants/colors';
import { Dimensions } from 'react-native';
import { abbreviateNumber } from '../../../utils/number_formatter';
import { TouchableOpacity } from 'react-native-gesture-handler';
import DateFormat from '../../rb-components/DateFormat';
import Icon from 'react-native-vector-icons/FontAwesome';

const { width } = Dimensions.get('window');
const Traffic = ({ report, company }: any) => {
  const [itemList, setItemList] = useState<any[]>([]);
  useEffect(() => {
    setItemList([]);
    if (report) {
      parseReportData();
    }
  }, [report]);

  const parseReportData = () => {
    const basic =
      report &&
      report?.data &&
      report?.data?.analytics &&
      report?.data?.analytics?.basic;
    let _listItems: React.SetStateAction<any[]> = [];
    if (!report) {
      return null;
    }
    let pageView: string = '0.0';
    if (basic.pageView) {
      pageView = parseFloat(basic.pageView).toFixed(2);
    }
    let sessionsPerUser: string = '0.0';
    if (basic.sessionsPerUser) {
      sessionsPerUser = parseFloat(basic.sessionsPerUser).toFixed(2);
    }
    let pageViewsPerSession: string = '0.0';
    if (basic.sessionsPerUser) {
      pageViewsPerSession = parseFloat(basic.pageViewsPerSession).toFixed(2);
    }
    let revenue: string = '0.0';
    if (basic.revenue) {
      revenue = `$${abbreviateNumber(basic.revenue)}`;
    }
    let ecommerceConversionRate = null;
    if (basic.ecommerceConversionRate) {
      ecommerceConversionRate = `${parseFloat(
        basic.ecommerceConversionRate,
      ).toFixed(2)}%`;
    }
    let sessionsDuration: string = '0.0';
    if (basic.sessionsDuration) {
      sessionsDuration = `${parseFloat(basic.sessionsDuration).toFixed(2)} s`;
    }
    let bounceRate = null;
    if (basic.bounceRate) {
      bounceRate = `${parseFloat(basic.bounceRate).toFixed(2)}%`;
    }

    _listItems = [
      {
        name: 'Users',
        value: abbreviateNumber(basic.users),
        icon: <Icon name="users" />,
        delta: abbreviateNumber(basic.usersChange),
      },
      {
        name: 'New Users',
        value: abbreviateNumber(basic.newUsers),
        delta: abbreviateNumber(basic.newUsersChange),
      },
      {
        name: 'Sessions',
        value: abbreviateNumber(basic.sessions),
        icon: <Icon name="users" />,
        delta: abbreviateNumber(basic.sessionsChange),
      },
      {
        name: '# of Sessions per User',
        value: sessionsPerUser,
        delta: abbreviateNumber(basic.sessionsPerUserChange),
      },
      {
        name: 'Page Views',
        value: abbreviateNumber(parseFloat(pageView)),
        icon: <Icon name="users" />,
        delta: abbreviateNumber(basic.pageViewChange),
      },
      {
        name: 'Pages per Session',
        value: pageViewsPerSession,
        delta: abbreviateNumber(basic.pageViewsPerSessionChange),
      },
      /*{
                  name: 'Revenue',
                  value:revenue,
                  icon: <Icon name="users" />,
                  delta: abbreviateNumber(basic.revenueChange),},{
                  name: 'Converion Rate',
                  value:ecommerceConversionRate,
                  delta: abbreviateNumber(basic.ecommerceConversionRateChange),
                },*/
      {
        name: 'Avg. Session Duration',
        value: sessionsDuration,
        icon: <Icon name="users" />,
        delta: abbreviateNumber(basic.sessionsDurationChange),
      },
      {
        name: 'Bounce Rate',
        value: bounceRate,
        delta: abbreviateNumber(basic.bounceRatehange),
      },
    ];
    setItemList(_listItems);
  };
  const renderItem = ({ item }: { item: any }): any => {
    return (
      <Card flex center>
        <Text grey40 text80BO>
          {item.name}
        </Text>
        <Text orange40 text30BO>
          {item.value}
        </Text>
        {item.delta > 0 ? (
          <View row center centerV>
            <Icon name="arrow-up" color={colors.Green} />
            <Text green30 text90>
              {item.delta && item.delta.toFixed(2)}
            </Text>
          </View>
        ) : (
          <View row center centerV>
            <Icon name="arrow-down" color={colors.RedLighter} />
            <Text red40 text90>
              {item.delta && item.delta.toFixed(2)}
            </Text>
          </View>
        )}
      </Card>
    );
  };
  return (
    <>
      <Swiper
        loop={false}
        paginationStyle={styles.paginationStyle}
        dotStyle={styles.dot}
        activeDotStyle={styles.activeDot}
        showsPagination={true}>
        {itemList.map((item, index) => (
          <Card flex center>
            <Text grey40 text30BO>
              {item.name}
            </Text>
            <Text orange40 text10BO>
              {item.value}
            </Text>
            {item.delta > 0 ? (
              <View row center centerV>
                <Icon name="arrow-up" color={colors.Green} />
                <Text green30 text50>
                  {item.delta?.toFixed(2)}
                </Text>
              </View>
            ) : (
              <View row center centerV>
                <Icon name="arrow-down" color={colors.RedLighter} />
                <Text red40 text90>
                  {item.delta?.toFixed(2)}
                </Text>
              </View>
            )}
          </Card>
        ))}
      </Swiper>
      <View marginT-20>
        <TouchableOpacity
          style={{ backgroundColor: colors.white, width: width / 2.4 }}>
          {/* {((formattedTime)) ?? "not found date"} */}
          <DateFormat />
        </TouchableOpacity>
      </View>
    </>
  );
};

export default Traffic;

const styles = StyleSheet.create({
  paginationStyle: {
    position: 'relative',
    top: 5,
    height: 100,
    backgroundColor: 'gray',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  dot: {
    width: 20,
    height: 5,
    borderRadius: 0,
    marginHorizontal: 5,
    backgroundColor: colors.white,
    borderWidth: 1,
  },
  activeDot: {
    width: 20,
    height: 5,
    borderWidth: 1,
    borderRadius: 5,
    marginHorizontal: 5,
    backgroundColor: colors.Orange,
  },
});