Untitled

import React from 'react';
import Swiper from 'react-native-swiper';
import { View, Text, Card } from 'react-native-ui-lib';
import { nFormatter } from '../../../utils/number_formatter';
import DateFormat from '../../rb-components/DateFormat';
import colors from '../../rb-constants/colors';

type Props = {
  report: any;
  company?: any;
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
function Device({ report, company }: Props) {

  // console.log(report?.data?.analytics?.devices);
  // console.log("tablet",report?.data?.analytics?.devices[0]?.sessions * 100 / (report?.data?.analytics?.devices[1].sessions + report?.data?.analytics?.devices[0]?.sessions));
  // console.log("mobile",(report?.data?.analytics?.devices[1]?.sessions ?? 0) * 100 / ((report?.data?.analytics?.devices[1].sessions ?? 0) + (report?.data?.analytics?.devices[0]?.sessions ?? 0)+(report?.data?.analytics?.devices[4]?.sessions ?? 0)));
  // console.log("tablet",((report?.data?.analytics?.devices[4]?.sessions ?? 0) * 100 / ((report?.data?.analytics?.devices[1].sessions ?? 0) + (report?.data?.analytics?.devices[0]?.sessions ?? 0)+(report?.data?.analytics?.devices[4]?.sessions ?? 0)) ?? "N/A"));
  // console.log("desktop",(report?.data?.analytics?.devices[0]?.sessions ?? 0) * 100 / ((report?.data?.analytics?.devices[1].sessions ?? 0) + (report?.data?.analytics?.devices[0]?.sessions ?? 0)+(report?.data?.analytics?.devices[4]?.sessions ?? 0)));
  // console.log(report?.data?.analytics);
  return (
    <View flex spread marginV-5 paddingB-0>
      <Swiper
        loop={false}
        paginationStyle={{
          position: 'absolute',
          bottom: 10,
          left: 0,
          right: 0,
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'row',
        }}
        dotStyle={{
          width: 20,
          height: 5,
          borderRadius: 0,
          marginHorizontal: 5,
          backgroundColor: colors.white,
          borderWidth: 1,
        }}
        activeDotStyle={{
          width: 20,
          height: 5,
          borderWidth: 1,
          marginHorizontal: 5,
          backgroundColor: colors.Orange,
        }}
        showsPagination>
        <View paddingH-8>
          <View center>
            <Text
              style={{
                fontSize: 100,
                color: colors.Orange,
                textAlign: 'right',
              }}>
            2564
            </Text>
            <Text grey20 style={{ fontSize: 30 }}>
              MOBILE
            </Text>
            <Text green10 style={{ color: colors.Green, fontSize: 30 }}>
              {(report?.data?.analytics?.devices[3]?.sessions ?? 0, 2) ?? '-'}
            </Text>
          </View>
          {/* <Card borderRadius={20} padding-20 marginT-10 style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials></Text>
              <Text orange40 initials>{nFormatter(report?.data?.analytics?.devices[1].sessions ?? 0, 2) ?? '-'}</Text>
            </View>
          </Card> */}
          <Card
            borderRadius={20}
            padding-20
            marginT-10
            style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>
                Device Rate
              </Text>
              <Text orange40 initials>
                28%
              </Text>
            </View>
          </Card>
          <Card
            borderRadius={20}
            padding-20
            marginT-10
            style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>
                New Users
              </Text>
              <Text orange40 initials>
              128
              </Text>
            </View>
          </Card>
        </View>
        <View paddingH-8>
          <View center>
            <Text
              style={{
                fontSize: 100,
                color: colors.Orange,
                textAlign: 'right',
              }}>
              985
            </Text>
            <Text style={{ fontSize: 30, textAlign: 'left' }}>DESKTOP</Text>
            <Text
              style={{ fontSize: 30, textAlign: 'right', color: colors.Green }}>
              {nFormatter(
                report?.data?.analytics?.devices[2]?.sessions ?? 0,
                2,
              ) ?? '-'}
            </Text>
          </View>
          {/* <Card borderRadius={20} padding-20 marginT-10 style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>Device Rate</Text>
              <Text orange40 initials>{nFormatter(report?.data?.analytics?.devices[0].sessions ?? 0, 2) ?? '-'}</Text>
            </View>
          </Card> */}
          <Card
            borderRadius={20}
            padding-20
            marginT-10
            style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>
                Device Rate
              </Text>
              <Text orange40 initials>
                72%
              </Text>
            </View>
          </Card>
          <Card
            borderRadius={20}
            padding-20
            marginT-10
            style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>
                New Users
              </Text>
              <Text orange40 initials>
               65
              </Text>
            </View>
          </Card>
        </View>
        <View paddingH-8>
          <View center>
            <Text
              style={{
                fontSize: 100,
                color: colors.Orange,
                textAlign: 'right',
              }}>
              {report?.data?.analytics?.devices[4]?.sessions ?? 'N/A' ?? '-'}
            </Text>
            <Text style={{ fontSize: 30, textAlign: 'left' }}>TABLET</Text>
            <Text
              style={{ fontSize: 30, textAlign: 'right', color: colors.Green }}>
              {report?.data?.analytics?.devices[5]?.sessions ?? 'N/A' ?? '-'}
            </Text>
          </View>
          {/* <Card borderRadius={20} padding-20 marginT-10 style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>Device Rate</Text>
              <Text orange40 initials>{nFormatter(report?.data?.analytics?.devices[3].sessions ?? 'N/A', 2) ?? '-'}</Text>
            </View>
          </Card> */}
          <Card
            borderRadius={20}
            padding-20
            marginT-10
            style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>
                Device Rate
              </Text>
              <Text orange40 initials>
                N/A
              </Text>
            </View>
          </Card>
          <Card
            borderRadius={20}
            padding-20
            marginT-10
            style={{ borderWidth: 1, height: 80 }}>
            <View row spread>
              <Text grey30 initials>
                New Users
              </Text>
              <Text orange40 initials>
                {report?.data?.analytics?.newUsersByDevices[4]?.sessions ??
                  'N/A'}
              </Text>
            </View>
          </Card>
        </View>
      </Swiper>
      <DateFormat />
    </View>
  );
}

export default Device;