Untitled

import React, { useState } from 'react';
import Swiper from 'react-native-swiper'
import { StyleSheet } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import AnalyticsCard from '../../rb-components/AnalyticsCard';
import {
  Col, Row
} from '../../rb-components/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';
import TextCard from './TextCard';
const { width, height } = Dimensions.get('screen');
function Traffic() {
  const { data: report } = useGetLatestReport();
  // console.log(report?.data?.analytics)
  // console.log(report?.data)

  const [isLoading, setIsLoading] = useState(false);
  const handleButtonClick = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }
  return (
    <>
      <View style={{ width: '100%', height: height * 0.6 }}>
        <Swiper
          loop={false}
          paginationStyle={styles.paginationStyle}
          dotStyle={styles.dot}
          activeDotStyle={styles.activeDot}
          showsPagination={true}>
          <View marginT-20>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    value={nFormatter(report?.data?.analytics?.basic?.users ?? 0, 2) ?? '-'}
                    description={"Users"}
                    change={nFormatter(report?.data?.analytics?.basic?.usersChange ?? 0, 2) ?? "-"}
                  />
                }
                />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    value={nFormatter(report?.data?.analytics?.basic?.newUsers ?? 0, 2) ?? '-'}
                    description={"New Users"}
                    change={nFormatter(report?.data?.analytics?.basic?.newUsersChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
            </Row>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Sessions"}
                    value={nFormatter(report?.data?.analytics?.basic?.sessions ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.sessionsChange ?? 0, 2) ?? '-'} />
                } />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Sessions Per"}
                    value={nFormatter(report?.data?.analytics?.basic?.sessionsPerUser ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.sessionsPerUserChange ?? 0, 2) ?? "-"}
                  />
                } />
              </Col>
            </Row>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Page Views"}
                    value={nFormatter(report?.data?.analytics?.basic?.pageView ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.pageViewChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Page Per"}
                    value={nFormatter(report?.data?.analytics?.basic?.pageViewsPerSession ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.pageViewsPerSessionChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
            </Row>
          </View>
          <View marginT-100>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Revenue"}
                    value={nFormatter(report?.data?.analytics?.basic?.revenue ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.revenueChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Conversion Rate"}
                    value={nFormatter(report?.data?.analytics?.basic?.ecommerceConversionRate ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.ecommerceConversionRateChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
            </Row>
            <Row>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"ASD"}
                    value={nFormatter(report?.data?.analytics?.basic?.sessionsDuration ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.sessionsDurationChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
              <Col style={styles.col} numRows={6}>
                <AnalyticsCard value={
                  <TextCard
                    description={"Bounce Rate"}
                    value={nFormatter(report?.data?.analytics?.basic?.bounceRate ?? 0, 2) ?? '-'}
                    change={nFormatter(report?.data?.analytics?.basic?.bounceRateChange ?? 0, 2) ?? "-"} />
                } />
              </Col>
            </Row>
          </View>

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

const styles = StyleSheet.create({
  col: {
    borderWidth: 2,
    height: height /5.5,
    borderRadius: 24,
    margin: 4,
    borderColor: colors.grey,
    justifyContent: 'center',
    alignItems: 'center',
  },
  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,
  },
})