import React, { useState, useEffect } from 'react';
import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native';
import { useSelector } from 'react-redux';
import { calculateEstimatedDashboardData, splitNumber } from '../../utils/dashboard/dashboard';
const SCREEN_WIDTH = Dimensions.get('window').width;
const xOffset = new Animated.Value(0);
const transitionAnimation = index => {
return {
transform: [
{ perspective: 800 },
{
scale: xOffset.interpolate({
inputRange: [
(index - 1) * SCREEN_WIDTH,
index * SCREEN_WIDTH,
(index + 1) * SCREEN_WIDTH
],
outputRange: [0.25, 1, 0.25]
})
}
]
};
};
/**
* Scrollable horizontal view.
* Shows the dashboard data that is known on fixrates homepage.
*/
const DashboardScrollBar = () => {
const { dashboard } = useSelector(state => state.init);
const { organisationType } = useSelector(state => state.init.sessionData);
const [estimated, setEstimated] = useState(calculateEstimatedDashboardData(dashboard));
useEffect(() => {
const interval = setInterval(() => {
setEstimated(calculateEstimatedDashboardData(dashboard));
}, 3000);
return () => {
clearInterval(interval);
};
}, []);
let dashboardbar;
if (organisationType === 'BANK') {
dashboardbar = [
{
title: 'Samlet innskudd via Fixrate',
content: `${splitNumber(dashboard.calculatedBalance.toFixed())} kr`
},
{
title: 'Gjennomsnittsrente i dag',
content: `${splitNumber(dashboard.calculatedInterestRateLastDay)}%`
},
{ title: 'NIBOR3M', content: `${splitNumber(dashboard.currentNibor)}%` }
];
} else {
dashboardbar = [
{
title: 'Innskudd inkl. renter',
content: `${splitNumber(estimated.estimatedTotalBalance.toFixed())} kr`
},
{
title: 'Renter i dag',
content: `${splitNumber(estimated.estimatedInterestSinceMidnight.toFixed())} kr`
},
{
title: 'Renter denne måneden',
content: `${splitNumber(estimated.estimatedInterestLastMonth.toFixed())} kr`
},
{
title: 'Gjennomsnittsrente i dag',
content: `${dashboard.calculatedInterestRateLastDay.toFixed(2)}%`
},
{ title: 'NIBOR3M', content: `${splitNumber(dashboard.currentNibor)}%` }
];
}
return (
<View style={styles.scrollView}>
<Animated.ScrollView
scrollEventThrottle={16}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: xOffset } } }], {
useNativeDriver: true
})}
showsHorizontalScrollIndicator={false}
horizontal
pagingEnabled
decelerationRate="fast"
>
{dashboardbar.map((e, i) => (
<View key={i} style={styles.scrollPage}>
<Animated.View style={[styles.screen, transitionAnimation(i)]}>
<Text style={styles.text}>{e.title}</Text>
<Text style={styles.secondaryText}>{e.content}</Text>
</Animated.View>
</View>
))}
</Animated.ScrollView>
<View style={styles.dotView}>
{dashboardbar.map((_, i) => {
const opacity = xOffset.interpolate({
inputRange: [(i - 1) * SCREEN_WIDTH, i * SCREEN_WIDTH, (i + 1) * SCREEN_WIDTH],
outputRange: [0.25, 1, 0.25],
extrapolate: 'clamp'
});
return <Animated.View key={i} style={[{ opacity }, styles.dot]} />;
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: '#566681'
},
scrollPage: {
width: SCREEN_WIDTH,
color: '#566681'
},
screen: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#566681'
},
text: {
fontSize: 25,
fontWeight: 'bold',
fontFamily: 'MuseoSansRounded-900',
color: '#fff'
},
secondaryText: {
fontSize: 22,
fontWeight: 'bold',
fontFamily: 'MuseoSansRounded-700',
color: '#fff'
},
dotView: {
flexDirection: 'row',
justifyContent: 'center'
},
dot: {
height: 10,
width: 10,
backgroundColor: 'white',
margin: 8,
borderRadius: 5
}
});
export default DashboardScrollBar;