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) {
  const devices =
    report.data && report.data.analytics && report.data.analytics.devices;
  const analytics = report.data && report.data.analytics;
  const newUsersByDevices =
    report.data &&
    report.data.analytics &&
    report.data.analytics.newUsersByDevices;
  const transactions =
    report.data &&
    report.data.analytics &&
    report.data.analytics.transactionsByDevices;
  const revenueByDevices =
    report.data &&
    report.data.analytics &&
    report.data.analytics.revenueByDevices;

  if (!report) {
    return null;
  }

  const mobile  = 'mobile';
  const desktop = 'desktop';
  const tablet = 'tablet';
  const mobileChange = 'mobileChange';
  const desktopChange = 'desktopChange';
  const tabletChange = 'tabletChange';
  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',
              }}>
              {nFormatter(
                report?.data?.analytics?.devices[1]?.sessions ?? 0,
                2,
              ) ?? '-'}
            </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>
                {nFormatter(
                  report?.data?.analytics?.newUsersByDevices[1]?.sessions ?? 0,
                  2,
                ) ?? '-'}
              </Text>
            </View>
          </Card>
        </View>
        <View paddingH-8>
          <View center>
            <Text
              style={{
                fontSize: 100,
                color: colors.Orange,
                textAlign: 'right',
              }}>
              {nFormatter(
                report?.data?.analytics?.devices[0]?.sessions ?? 0,
                2,
              ) ?? '-'}
            </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>
                {nFormatter(
                  report?.data?.analytics?.newUsersByDevices[0]?.sessions ?? 0,
                  2,
                ) ?? '-'}
              </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;