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 { nFormatter } from '../../../utils/number_formatter';

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

const Demographics = ({ report, company }: Props) => {
  const [filter, setFilter] = useState('');

  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 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 (filter === 'male') {
        ageData = splitData(genderAndAge, 'male');
      } else if (filter === 'female') {
        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: 1,
                borderColor: colors.grey,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
                backgroundColor: filter === '' ? colors.Orange : colors.White,
              }}
              onPress={() => setFilter('')}>
              <View center spread>
                <Text
                  style={{
                    color: filter === '' ? colors.white : colors.black,
                  }}>
                  ALL
                </Text>
              </View>
            </TouchableOpacity>
          </View>
          <View row center backgroundColor={colors.White} marginT-30>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderRadius: 40,
                borderColor: colors.grey,
                width: 100,
                padding: 10,
                marginRight: 10,
                backgroundColor:
                  filter === 'male' ? colors.Orange : colors.White,
              }}
              onPress={() => setFilter('male')}>
              <View center>
                <Text
                  style={{
                    color: filter !== 'male' ? colors.black : colors.White,
                  }}>
                  MALE
                </Text>
              </View>
            </TouchableOpacity>
          </View>
          <View row center backgroundColor={colors.White} marginT-30>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderColor: colors.grey,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
                backgroundColor:
                  filter === 'female' ? colors.Orange : colors.White,
              }}
              onPress={() => setFilter('female')}>
              <View center>
                <Text
                  style={{
                    color: filter !== 'female' ? colors.black : colors.White,
                  }}>
                  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 }) => `${nFormatter(datum.y ?? 0, 2)}`}
              labelComponent={<VictoryLabel dy={0} />}
              animate={{
                animationWhitelist: ['style', 'data', '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.Orange,
                  width: 30,
                },
              }}
            />
          </VictoryChart>
        </View>
        <View row center>
          <View row marginR-50>
            <View
              width={20}
              height={20}
              backgroundColor={colors.OrangeDarker}
            />
            <Text>Male</Text>
          </View>
          <View row>
            <View
              width={20}
              height={20}
              backgroundColor={colors.OrangeLightest}
            />
            <Text>Female</Text>
          </View>
        </View>
      </GridView>
      <DateFormat />
    </>
  );
};

export default Demographics;