Untitled

import React, { useState } from 'react';
import { Carousel, Text, View } from 'react-native-ui-lib';
import { FlatList, StyleSheet } from 'react-native';
import colors from '../../rb-constants/colors';
import { VictoryPie, VictoryLabel } from 'victory-native';
import { ScrollView } from 'react-native-gesture-handler';
import { FlashList } from '@shopify/flash-list';

interface CountryData {
  name: string;
  sessions: number;
}
type Props = {
  report: any;
  company?: any;
};

const UserLocation = ({ report, company }: Props) => {
  const countryData = report?.data?.analytics?.country || [];
  const filteredData = countryData.filter((data: any) => {
    if (
      !data.name.includes('Change') &&
      !data.name.includes('notset') &&
      !data.name.includes('not set') &&
      data.sessions
    ) {
      return true;
    }
    return false;
  });

  const sortedData = filteredData.sort(
    (a: any, b: any) => b.sessions - a.sessions,
  );
  const top5 = sortedData.slice(0, 5);
  const remainingSessions = sortedData
    .slice(5)
    .reduce((total: any, data: any) => total + data.sessions, 0);
  const others = { name: 'Others', sessions: remainingSessions };
  const result: CountryData[] = [...top5, others];

  const totalSessions = result.reduce(
    (total, data) => total + data.sessions,
    0,
  );

  const dataWithPercentage = result.map(data => ({
    x: data?.name,
    y: data?.sessions,
    label: data.name,
    extraLabel: `${((data.sessions / totalSessions) * 100).toFixed(2)}%`,
  }));
  const pieLabel = dataWithPercentage.map(item => ({
    x: item.extraLabel,
    y: item.label,
    label: `${item.extraLabel}\n${item.label}`,
  }));

  const orangeTones = [
    colors.Orange,
    colors.OrangeDark,
    colors.OrangeDarker,
    colors.OrangeLight,
    colors.OrangeLighter,
    colors.OrangeLightest,
  ];
  const [activeSlide, setActiveSlide] = useState(0);
  const [pieheightState, setPieHeightState] = useState(300);
  const [heightState, setHeightState] = useState(300);

  return (
    <View flex marginV-20>
      {totalSessions > 0 ? (
        <Carousel
          onChangePage={(index: number) => setActiveSlide(index)}
          pageControlPosition="under"
          pageControlProps={{
            numOfPages: dataWithPercentage.length,
            currentPage: activeSlide,
            size: 10,
            borderWidtH: 1,
            borderColor: 'black',
            color: 'orange',
            inactiveColor: 'grey',
          }}>
          <View
            onLayout={event => {
              setPieHeightState(event.nativeEvent.layout.height);
            }}
            paddingR-30
            marginR-20>
            <VictoryPie
              style={{
                labels: {
                  fill: colors.greyDarker,
                  textAnchor: 'middle',
                  fontSize: 13.9,
                },
              }}
              innerRadius={30}
              labelRadius={110}
              colorScale={orangeTones}
              data={pieLabel}
              labelComponent={
                <VictoryLabel textAnchor="end" verticalAnchor="middle" />
              }
            />
          </View>
          <View marginT-20 centerH>
            <Text initials orange40>
              All Visitors
            </Text>
            <View
              margin-10
              width={300}
              height={activeSlide === 0 ? pieheightState : heightState}>
              <FlashList
                data={sortedData}
                keyExtractor={(item, index) => index.toString()}
                estimatedItemSize={48}
                renderItem={({ item }: any) => (
                  <View
                    onLayout={event => {
                      setHeightState(
                        event.nativeEvent.layout.height * sortedData.length,
                      );
                    }}
                    center
                    row
                    flex-1
                    style={{ borderColor: colors.Orange, borderWidth: 1 }}>
                    <View center flex-1>
                      <Text heading6 center flex style={{ color: colors.grey }}>
                        {item.name}
                      </Text>
                    </View>
                    <View flex-1 backgroundColor="orange">
                      <Text
                        heading6
                        center
                        flex
                        style={{ color: colors.white }}>
                        {item.sessions}
                      </Text>
                    </View>
                  </View>
                )}
              />
            </View>
          </View>
        </Carousel>
      ) : (
        <View margin-20>
          <Text>"You currently do not have a data..."</Text>
        </View>
      )}
    </View>
  );
};

export default UserLocation;