import React from 'react';
import { StyleSheet, View } from 'react-native';
import { dateFormat, findProductName } from '../../../utils/dashboard/dashboard';
import ColoredLabel from '../../../components/ColoredLabel';
/**
* Component for dashboard showing orders that has a termination date.
* @param {properties} props Component properties.
*
* @memberof module:Components
* @component
* @example
* <ForTermination
* deposit={{
"expire": 2021-01-12T00:00:00.000Z,
"productId": "3",
"type": "FIXED",
"volume": 15,
}}
* date={new Date(2021-01-12T00:00:00.000Z)}
* ftKey={unqiue identifier}
* />
*/
const ForTermination = props => {
const { deposit, date, ftKey } = props;
return (
<View key={ftKey} style={styles.wrapper}>
<ColoredLabel
containerStyle={styles.date}
textStyle={styles.dateText}
labelText={dateFormat(date)}
/>
<ColoredLabel
containerStyle={styles.product}
textStyle={styles.productText}
labelText={findProductName(deposit.productId)}
/>
<ColoredLabel
containerStyle={styles.volume}
textStyle={styles.volumeText}
labelText={`${deposit.volume} mill.`}
/>
</View>
);
};
const primaryText = 'MuseoSansRounded-700';
const primaryTextBold = 'MuseoSansRounded-900';
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
marginTop: 20,
justifyContent: 'space-around'
},
date: {
width: 82,
backgroundColor: '#FF6666',
justifyContent: 'center',
alignItems: 'center',
padding: 5,
borderRadius: 5
},
dateText: {
textAlign: 'center',
fontFamily: primaryText
},
product: {
borderRadius: 5,
width: 60,
backgroundColor: '#EEEEEE',
alignContent: 'center',
padding: 5
},
productText: {
textAlign: 'center',
fontFamily: primaryText
},
volume: {
width: 60,
backgroundColor: '#EBFFC8',
justifyContent: 'center',
alignItems: 'center',
padding: 5,
borderRadius: 5
},
volumeText: {
textAlign: 'center',
color: '#00894B',
fontFamily: primaryText
}
});
export default ForTermination;