Untitled

import React from 'react';
import { View, Text, Card, Carousel } from 'react-native-ui-lib';
import colors from '../../rb-constants/colors';
import { nFormatter } from '../../../utils/number_formatter';
type Props = {
  report: any;
  company?: any;
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const EntryPages = ({ report, company }: Props) => {
  //totalSessions
  let allSessions = report?.data?.analytics?.landingpagesAndSessinons;
  let filteredArray = allSessions?.filter(
    (item: any) => !item.name.includes('Change'),
  );
  let firstFiveElements = filteredArray?.slice(0, 5);
  let totalSessions = filteredArray?.reduce(
    (sum: any, item: any) => sum + item.sessions,
    0,
  );

  //page session rate
  let sessionsRate = report?.data?.analytics?.landingpagesAndSessionsRate;
  let sessionsRateSpec: any[] = [];
  let sessionAvgDuration =
    report?.data?.analytics?.landingpagesAndAvgSessionDuration;
  let avgDurations: any[] = [];

  for (let i = 0; i < 5; i++) {
    sessionsRateSpec[i] = sessionsRate?.find(
      (o: any) => o.name === firstFiveElements[i]?.name,
    );
    avgDurations[i] = new Date(
      sessionAvgDuration?.find(
        (o: any) => o.name === firstFiveElements[i]?.name,
      )?.sessions * 1000,
    )
      .toUTCString()
      .split(' ')[4];
  }

  //page transactions
  let totalTransaction = report?.data?.analytics?.landingpagesAndTransactions;
  let transactionSpec = [];
  for (let i = 0; i < 5; i++) {
    transactionSpec[i] = totalTransaction?.find(
      (o:any) => o.name === firstFiveElements[i]?.name,
    );
  }

  //first page revenue
  let totalRevenue = report?.data?.analytics?.landingpagesAndRevenue;
  let revenueSpec = [];
  for (let i = 0; i < 5; i++) {
    revenueSpec[i] = totalRevenue?.find(
      (o:any) => o.name === firstFiveElements[i]?.name,
    );
  }
  const sessions = report?.data?.analytics?.landingpagesAndSessinons;
  const session: any[] = [];
  if (sessions) {
    for (let i = 0; i < sessions.length; i++) {
      sessions.map((e: any) => {
        session.push(e.sessions);
      });
    }
  }
  const largestFive = session.sort((a, b) => b - a).slice(0, 5);
  const uniqueValues = Array.from(new Set(session));
  const sessionsData = uniqueValues.slice(0, 5);
  return (
    <>
      <View flex-1 center>
        <Carousel>
          {sessionsData.map((page, index) => (
            <View key={index}>
              <View centerH flex-0 marginT-5 spread>
                <Text
                  initials
                  color={colors.Orange}
                  style={{ fontWeight: 'bold' }}>
                  Top Five Landing Page
                </Text>
              </View>
              <View flex spread margin-10 padding-5>
                <Card
                  borderRadius={40}
                  padding-10
                  marginT-10
                  style={{ borderWidth: 1, height: 60 }}>
                  <View row spread>
                    <Text grey30 initials style={{ fontSize: 24 }}>
                      Total Session
                    </Text>
                    <Text orange40 initials style={{ fontSize: 24 }}>
                      {totalSessions}
                    </Text>
                  </View>
                </Card>
                <View row center backgroundColor={colors.White} marginT-10>
                  <Card
                    style={{
                      borderColor: colors.Orange,
                      backgroundColor: colors.Orange,
                      borderRadius: 40,
                      width: 290,
                      padding: 4,
                      marginRight: 10,
                    }}>
                    <View center spread>
                      <Text white initials style={{ fontSize: 22 }}>
                        {sessionsRateSpec[index]?.name.substring(0, 20)}
                      </Text>
                    </View>
                  </Card>
                </View>
                <Card
                  borderRadius={20}
                  padding-10
                  marginT-10
                  style={{ borderWidth: 0.5, height: 60 }}>
                  <View row spread>
                    <Text grey30 initials style={{ fontSize: 22 }}>
                      Session
                    </Text>
                    <Text orange40 initials style={{ fontSize: 22 }}>
                      {sessionsData[index]}
                    </Text>
                  </View>
                </Card>
                <Card
                  borderRadius={20}
                  padding-10
                  marginT-10
                  style={{ borderWidth: 0.5, height: 60 }}>
                  <View row spread>
                    <Text grey30 initials style={{ fontSize: 22 }}>
                      Page/Sessions
                    </Text>
                    <Text orange40 initials style={{ fontSize: 22 }}>
                      {nFormatter(sessionsRateSpec[index]?.sessions ?? 0, 2) ??
                        '-'}
                    </Text>
                  </View>
                </Card>
                <Card
                  borderRadius={20}
                  padding-10
                  marginT-10
                  style={{ borderWidth: 0.5, height: 60 }}>
                  <View row spread>
                    <Text grey30 initials style={{ fontSize: 20 }}>
                      Avg. Session Duration
                    </Text>
                    <Text orange40 initials style={{ fontSize: 22 }}>
                      {avgDurations[index]}
                    </Text>
                  </View>
                </Card>
              </View>
            </View>
          ))}
        </Carousel>
      </View>
    </>
  );
};
export default EntryPages;