Untitled

import React from "react";
import { Text, View } from "react-native-ui-lib";
import Swiper from "react-native-swiper";
import { ScrollView, StyleSheet } from "react-native";
import colors from "../../rb-constants/colors";
import { useGetLatestReport } from "../../../hooks/query/report";
import { VictoryPie, VictoryLabel } from "victory-native";
import Svg from "react-native-svg";
import DateFormat from "../../rb-components/DateFormat";

const listItem = [
  {
    country: "United States",
    count: "123",
  },
  {
    country: "Turkey",
    count: "187",
  },
  {
    country: "Canada",
    count: "93",
  },
  {
    country: "France",
    count: "105",
  },
  {
    country: "Germany",
    count: "81",
  },
  {
    country: "Japan",
    count: "25",
  },
  {
    country: "Austria",
    count: "21",
  },
];

function UserLocation() {
  //const { data: report } = useGetLatestReport();

  const sortedList = listItem.sort(
    (a, b) => parseInt(b.count) - parseInt(a.count)
  );
  const topFiveItems = sortedList.slice(0, 5);
  const otherCount = sortedList
    .slice(5)
    .reduce((total, item) => total + parseInt(item.count), 0);
  const data = [
    ...topFiveItems,
    { country: "Others", count: otherCount.toString() },
  ];
  const orangeTones = [
    colors.Orange,
    colors.OrangeDark,
    colors.OrangeDarker,
    colors.OrangeLight,
    colors.OrangeLighter,
    colors.OrangeLightest,
  ];

  return (
    <>
      <View flex spread margin-8 row>
        <Swiper
          loop={false}
          paginationStyle={styles.paginationStyle}
          dotStyle={styles.dot}
          activeDotStyle={styles.activeDot}
          showsPagination={true}
        >
          <Svg>
            <View centerH flex-0 marginT-50 spread>
              <Text initials color={colors.Orange}>
                Top Five Countries
              </Text>
            </View>
            <Svg>
              <VictoryPie
                standalone={false}
                width={350}
                height={600}
                data={data.map((item) => ({
                  x: item.country,
                  y: parseInt(item.count),
                }))}
                colorScale={orangeTones}
                innerRadius={40}
                labelRadius={100}
                style={{ labels: { fontSize: 20, fill: "black" } }}
              />
              <VictoryLabel
                textAnchor="middle"
                style={{ fontSize: 20 }}
                x={400}
                y={-150}
              />
            </Svg>
          </Svg>

          <View flex-1>
            <View flex-0 marginT-50 centerH>
              <Text initials color={colors.Orange}>
                ALL VISITORS
              </Text>
              <View style={styles.container}>
                <ScrollView horizontal>
                  <View>
                    {listItem.map((item, index) => (
                      <View key={index} row>
                        <Text style={styles.cell}>{item.country}</Text>
                      </View>
                    ))}
                  </View>
                  <View>
                    {listItem.map((item, index) => (
                      <View key={index} row>
                        <Text style={styles.cellCount}>{item.count}</Text>
                      </View>
                    ))}
                  </View>
                </ScrollView>
              </View>
            </View>
            <View flex-0 centerH row paddingH-10 marginH-10></View>
          </View>
        </Swiper>
      </View>
      <View marginT-20>
        <DateFormat />
      </View>
    </>
  );
}

export default UserLocation;

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,
  },
  map: {
    flex: 1,
  },
  headerRow: {
    flexDirection: "row",
    backgroundColor: "lightgray",
  },
  headerCell: {
    padding: 10,
    fontWeight: "bold",
  },
  container: {
    marginVertical: 20,
  },
  cell: {
    textAlign:'center',
    width:150,
    borderWidth: 2,
    borderColor: colors.Orange,
    borderRadius: 5,
    marginVertical: 1,
    flex: 1,
    padding: 10,
  },
  cellCount: {
    textAlign:'center',
    width:150,
    fontWeight: "bold",
    borderWidth: 2,
    borderColor: colors.Orange,
    borderRadius: 5,
    marginVertical: 1,
    marginHorizontal: 2,
    flex: 1,
    padding: 10,
    backgroundColor: colors.Orange,
    color: colors.White,
  },
});