Untitled

/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
import React, { useState } from 'react';
import { View, Text } from 'react-native-ui-lib';
import { TouchableOpacity } from 'react-native-gesture-handler';
import colors from '../../rb-constants/colors';
import { GridView } from '../../rb-components/Grid';
import DateFormat from '../../rb-components/DateFormat';
import {
  VictoryBar,
  VictoryChart,
  VictoryLabel,
  VictoryTheme,
} from 'victory-native';
import { GetLatestReport } from '../../../api/mobile';

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

function Demographics({ report, company }: Props) {
  let isMale: any;
  let isFemale: any;
  const dataOperation = (list: string | any[]) => {
    const result = [['', '']];
    let total = 0;
    for (let i = 0; i < list.length; i++) {
      if (list[i].name.search('Change') === -1) {
        total += list[i].sessions;
      }
    }
    if (total === 0) {
      return null;
    }
    for (let i = 0; i < list.length; i++) {
      if (list[i].name.search('Change') === -1) {
        const temp = [];
        temp.push(list[i].name);
        temp.push((list[i].sessions * 100) / total);
        result.push(temp);
      }
    }
    return result;
  };

  const splitData = (list: string | any[], keyword: string) => {
    const result = [['', '']];
    let total = 0;
    for (let i = 0; i < list.length; i++) {
      if (list[i].name.search('Change') === -1) {
        const splitData = list[i].name.split('|');
        if (splitData[0] === keyword) {
          total += list[i].sessions;
        }
      }
    }
    if (total === 0) {
      return null;
    }
    for (let i = 0; i < list.length; i++) {
      if (list[i].name.search('Change') === -1) {
        const splitData = list[i].name.split('|');
        if (splitData[0] === keyword) {
          const temp = [];
          temp.push(splitData[1]);
          temp.push((list[i].sessions * 100) / total);
          result.push(temp);
        }
      }
    }
    return result;
  };

  const renderChart = () => {
    const data = report?.data;
    // const { gaData } = data && data?.analytics;
    // const connectList = data && data?.connectList;

    const genderData = [['', '']];
    let ageData: string[][] | null = [];
    const ageErrorData = [
      ['', ''],
      ['25-34', 47.3882945248584],
      ['35-44', 29.72519404237466],
      ['45-54', 6.083490664988462],
    ];
    const genderErrorData = [
      ['', ''],
      ['male', 45],
      ['female', 65],
    ];
    let male;
    let female;
    let isErrorGender = false;
    let isErrorAge = false;
    const gender = data?.analytics && data?.analytics.gender;
    const age = data?.analytics && data?.analytics.age;
    const genderAndAge = data?.analytics && data?.analytics.genderAndAge;
    if (!gender || gender.length === 0) {
      isErrorGender = true;
    }
    if (!isErrorGender) {
      male = gender.find((item: { name: string }) => item.name === 'male');
      female = gender.find((item: { name: string }) => item.name === 'female');
      if (male) {
        genderData?.push([male.name, male.sessions]);
      }
      if (female) {
        genderData?.push([female.name, female.sessions]);
      }
    }

    if (
      !age ||
      age.length === 0 ||
      !genderAndAge ||
      genderAndAge.length === 0
    ) {
      isErrorAge = true;
    }
    if (!isErrorAge) {
      if (isMale) {
        ageData = splitData(genderAndAge, 'male');
      } else if (isFemale) {
        ageData = splitData(genderAndAge, 'female');
      } else {
        ageData = dataOperation(age);
      }
      ageData?.sort();
    }

    const chartData = ageData?.map(item => ({ x: item[0], y: item[1] })) || [];

    return chartData;
  };

  return (
    <>
      <GridView noScroll={true} style={{ marginHorizontal: 5 }}>
        <View row centerH>
          <View row center backgroundColor={colors.White} marginT-30>
            <TouchableOpacity
              style={{
                borderWidth: 2,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
              }}
              onPress={() => {}}>
              <View center spread>
                <Text>ALL</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View row center backgroundColor={colors.White} marginT-30>
            <TouchableOpacity
              style={{
                borderWidth: 2,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
              }}
              onPress={() => {}}>
              <View center>
                <Text>MALE</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View row center backgroundColor={colors.White} marginT-30>
            <TouchableOpacity
              style={{
                borderWidth: 2,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
              }}
              onPress={() => {}}>
              <View center>
                <Text>FEMALE</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View center>
          <VictoryChart
            theme={VictoryTheme.material}
            style={{
              background: { fill: colors.white },
            }}
            domainPadding={{ x: 20 }}>
            <VictoryLabel
              x={40}
              y={10}
              style={{ fontSize: 20, fill: colors.grayLight }}
            />
            <VictoryBar
              barRatio={1.2}
              labels={({ datum }) => `# ${datum.y}`}
              labelComponent={<VictoryLabel dy={15} />}
              animate={{
                animationWhitelist: ['style', 'data', 'size'], // Try removing "size"
                onExit: {
                  duration: 500,
                  before: () => ({ opacity: 0.3, _y: 0 }),
                },
                onEnter: {
                  duration: 500,
                  before: () => ({ opacity: 0.3, _y: 0 }),
                  after: datum => ({ opacity: 1, _y: datum._y }),
                },
              }}
              data={renderChart()}
              style={{
                data: {
                  fill: colors.primary,
                  width: 25,
                },
              }}
            />
          </VictoryChart>
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          {renderChart()?.map((item, index) => (
            <View key={index}>
              <Text style={{ fontSize: 10, color: colors.grayLight }}>
                {item.x}
              </Text>
            </View>
          ))}
        </View>
      </GridView>
    </>
  );
}

export default Demographics;