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';
const { width, height } = Dimensions.get('screen');
function Swipe() {
  const { data: rapor } = useGetLatestReport();

  return (
    <View style={{
      width: '100%'
      , height: height / 1.5
    }}>
      <Swiper
        loop={false}
        paginationStyle={styles.paginationStyle}
        dotStyle={styles.dot}
        activeDotStyle={styles.activeDot}
        showsPagination={true}>
        <View style={styles.pageSwipe}>
          <View style={styles.image} >
            <Image source={images.traffic} />
          </View>
          <Row>
            <Col style={styles.col} numRows={6}>
              <AnalyticsCard value={
                <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={styles.totalText}>{rapor?.data?.analytics?.basic?.users ?? '-'}</Text>
                  <Text style={styles.description}>Users</Text>
                  <Text style={styles.change}>{rapor?.data?.analytics?.basic?.usersChange ?? "-"}</Text>

                </View>
              } />
            </Col>
            <Col style={styles.col} numRows={6}>
              <AnalyticsCard value={
                <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={styles.totalText}>{rapor?.data?.analytics?.basic?.newUsers ?? '-'}</Text>
                  <Text style={styles.description}>New Users</Text>
                  <Text style={styles.change}>{rapor?.data?.analytics?.basic?.newUsersChange ?? "-"}</Text>
                </View>
              } />
            </Col>
          </Row>
        </View>
        <View style={styles.pageSwipe}>
          <View style={styles.image} >
            <Image source={images.traffic} />
          </View>
          <Row>
            <Col style={styles.col} numRows={6}>
              <AnalyticsCard title="Users" value={"-"} />
            </Col>
            <Col style={styles.col} numRows={6}>
              <AnalyticsCard title="New Users" value={'-'} />
            </Col>
          </Row>
        </View>
        <View style={styles.pageSwipe}>
          <View style={styles.image} >
            <Image source={images.traffic} />
          </View>
          <Row>
            <Col style={styles.col} numRows={6}>
              <AnalyticsCard title="Users" value={"-"} />
            </Col>
            <Col style={styles.col} numRows={6}>
              <AnalyticsCard title="New Users" value={'-'} />
            </Col>
          </Row>
        </View>
      </Swiper>
    </View >

  );
}
export default Swipe;

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

  },
  col: {
    borderWidth: 2,
    height: height / 4,
    borderRadius: 16,
    margin: 4,
    borderColor: colors.gray,
    opacity: 0.5,
  },
  pageSwipe: {
  },

  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: 20,
    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.gray,
  },
  totalText: {
    fontSize: 60,
    color: colors.Orange,
  },
  description: {
    fontSize: 32,
    color: colors.grey,
  },
  change: {
    fontSize: 32,
    color: colors.Green,
  },
})