/* 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;