Untitled

import React from 'react';
import Swiper from 'react-native-swiper'
import { StyleSheet } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import AnalyticsCard from '../AnalyticsCard';
import {
  Col, Row
} from '../Grid';
import { Image } from 'react-native';
import images from '../../../themes/assets/images';
import colors from '../../rb-constants/colors';
import { Dimensions } from 'react-native';
import { useGetLatestReport } from '../../../hooks/query/report';
import { nFormatter } from '../../../utils/number_formatter';
const { width, height } = Dimensions.get('screen');
function Traffic() {
  const { data: report } = useGetLatestReport();
  // console.log(report?.data?.analytics)
  // console.log(report?.data)


  return (
    <>
      <View style={{ width: '100%', height: height / 1.5 }}>
        <Swiper
          loop={false}
          paginationStyle={styles.paginationStyle}
          dotStyle={styles.dot}
          activeDotStyle={styles.activeDot}
          showsPagination={true}>
          <View>
            <View style={styles.image}>
              <Image source={images.users} />
            </View>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.users ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Users</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.usersChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.newUsers ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>New Users</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.newUsersChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
            </Row>
          </View>
          <View>
            <View style={styles.image}>
              <Image source={images.sessions} />
            </View>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.sessions ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Sessions</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.sessionsChange ?? 0, 2) ?? '-'}</Text>
                  </View>} />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.sessionsPerUser ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>#Sessions Per</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.sessionsPerUserChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
            </Row>
          </View>
          <View>
            <View style={styles.image}>
              <Image source={images.pageView} />
            </View>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.pageView ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Page Views</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.pageViewChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.pageViewsPerSession ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Page Per</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.pageViewsPerSessionChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
            </Row>
          </View>
          <View>
            <View style={styles.image}>
              <Image source={images.revenue} />
            </View>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.revenue ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Revenue</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.revenueChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.ecommerceConversionRate ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Conversion Rate</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.ecommerceConversionRateChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
            </Row>
          </View>
          <View>
            <View style={styles.image}>
              <Image source={images.sessionDuration} />
            </View>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.sessionsDuration ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>ASD</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.sessionsDurationChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.totalText}>{nFormatter(report?.data?.analytics?.basic?.bounceRate ?? 0, 2) ?? '-'}</Text>
                    <Text style={styles.description}>Bounce Rate</Text>
                    <Text style={styles.change}>{nFormatter(report?.data?.analytics?.basic?.bounceRateChange ?? 0, 2) ?? "-"}</Text>
                  </View>} />
              </Col>
            </Row>
          </View>
        </Swiper>

      </View>
      <View marginT-20>
        <Text>
          {((report?.data?.dateCreated)) ?? "not found date"}
        </Text>
      </View>
    </>
  );
}
export default Traffic;

const styles = StyleSheet.create({
  showsPagination: {
    marginBottom: 20,
    width: 30,

  },
  col: {
    borderWidth: 2,
    height: height / 4,
    borderRadius: 16,
    margin: 4,
    borderColor: colors.grey,
  },

  slideContainer: {
    flex: 1,
    backgroundColor: colors.Black,
    alignItems: "center", justifyContent: "center"
  },
  image: {
    justifyContent: 'center',
    alignItems: 'center',
    height: height / 2.5,
    resizeMode: 'contain',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
  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,
    marginHorizontal: 5,
    backgroundColor: colors.Orange,
  },
  totalText: {
    fontSize: 50,
    color: colors.Orange,
  },
  description: {
    fontSize: 30,
    color: colors.grey,
  },
  change: {
    fontSize: 30,
    color: colors.Green,
  },
})