Untitled

/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable @typescript-eslint/no-unused-vars */

import React, { useState } from 'react';
import Swiper from 'react-native-swiper';
import { View, Carousel } from 'react-native-ui-lib';
import { GetLatestReport } from '../../../api/mobile';
import { InfoBoxDevice } from '../InfoBoxDevice';
import { StyleSheet } from 'react-native';
type Props = {
  report: any;
  company?: any;
};

const Device = ({ report, company }: Props) => {
  const { data: rapor, isLoading: reportIsLoading } = GetLatestReport(
    company?.id,
  );
  const findWordValue = (list: string | any[], keyword: any) => {
    let value = 0;
    for (let i = 0; i < list.length; i += 1) {
      if (list[i].name === keyword) {
        value = list[i].sessions;
        break;
      }
    }
    return value;
  };

  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 transactionsByDevices =
    report?.data &&
    report?.data?.analytics &&
    report?.data?.analytics?.transactionsByDevices;

  const revenueByDevices =
    report?.data &&
    report?.data?.analytics &&
    report?.data?.analytics?.revenueByDevices;

  const mobile = 'mobile';
  const desktop = 'desktop';
  const tablet = 'tablet';
  const mobileChange = 'mobileChange';
  const desktopChange = 'desktopChange';
  const tabletChange = 'tabletChange';
  const sessions = [];
  let totalSessions = 0;
  let isAnalyticsError = false;
  let errorMessageType = '';

  if (!analytics) {
    isAnalyticsError = true;
    errorMessageType = 'googleErrorMessage';
  }

  if (!isAnalyticsError) {
    if (devices) {
      sessions.push(findWordValue(devices, mobile));
      sessions.push(findWordValue(devices, desktop));
      sessions.push(findWordValue(devices, tablet));

      sessions.forEach(item => {
        if (item) {
          totalSessions += item;
        }
      });

      sessions.push(findWordValue(devices, mobileChange));
      sessions.push(findWordValue(devices, desktopChange));
      sessions.push(findWordValue(devices, tabletChange));
    }

    const newUsers = [];
    if (newUsersByDevices) {
      newUsers.push(findWordValue(newUsersByDevices, mobile));
      newUsers.push(findWordValue(newUsersByDevices, desktop));
      newUsers.push(findWordValue(newUsersByDevices, tablet));
    }

    const transactions = [];
    if (transactionsByDevices) {
      transactions.push(findWordValue(transactionsByDevices, mobile));
      transactions.push(findWordValue(transactionsByDevices, desktop));
      transactions.push(findWordValue(transactionsByDevices, tablet));
    }

    const revenue = [];
    if (revenueByDevices) {
      revenue.push(findWordValue(revenueByDevices, mobile));
      revenue.push(findWordValue(revenueByDevices, desktop));
      revenue.push(findWordValue(revenueByDevices, tablet));
    }

    const sessionsRate = [];
    if (totalSessions !== 0) {
      sessionsRate.push(
        (sessions[0] / totalSessions) * 100,
        (sessions[1] / totalSessions) * 100,
        (sessions[2] / totalSessions) * 100,
      );
    } else {
      sessionsRate.push(0, 0, 0);
    }

    const listItems = [
      {
        name: 'MOBILE',
        sessions: sessions[0],
        sessionsChange: sessions[3],
        sessionsRate: sessionsRate[0],
        newUsers: newUsers[0],
        transactions: transactions[0],
        revenue: revenue[0],
      },
      {
        name: 'DESKTOP',
        sessions: sessions[1],
        sessionsChange: sessions[4],
        sessionsRate: sessionsRate[1],
        newUsers: newUsers[1],
        transactions: transactions[1],
        revenue: revenue[1],
      },
      {
        name: 'TABLET',
        sessions: sessions[2],
        sessionsChange: sessions[5],
        sessionsRate: sessionsRate[2],
        newUsers: newUsers[2],
        transactions: transactions[2],
        revenue: revenue[2],
      },
    ];
    const [activeSlide, setActiveSlide] = useState(0);

    return (
      <View flex marginV-5 paddingB-0>
        <Carousel
          onChangePage={index => setActiveSlide(index)}
          pageControlPosition="under"
          pageControlProps={{
            numOfPages: listItems.length,
            currentPage: activeSlide,
            color: 'orange',
            inactiveColor: 'grey',
            containerStyle: styles.pageControlContainer,
            dotStyle: styles.pageControlDot,
          }}>
          {listItems.map((item, index) => {
            return <InfoBoxDevice item={item} />;
          })}
        </Carousel>
      </View>
    );
  }

  return null;
};

export default Device;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 25,
  },
  pageControlContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  pageControlDot: {
    width: 10, // Adjust the width to make the dots square-shaped
    aspectRatio: 1, // Set aspectRatio to 1 to maintain square shape
    marginHorizontal: 4,
    backgroundColor: 'black',
  },
});