src/views/diary/components/GradingCardBack.js
import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import DetailsRoundButton from '../../../components/buttons/DetailsRoundButton';
import GradingCardFront from './GradingCardFront';
import InfoBoxOverlay from '../../../components/dialogBoxes/InfoBoxOverlay';
import {getEmojiImage} from '../../../utils/GradingScale';
import {RoundButtonSize} from '../../../utils/DimensionsConstants';
import {globalStyles} from '../../../styles/styles';
import {iOSxLargeTypo} from '../../../styles/Typography';
/**
* Component displaying the backside of a grading card in the diary.
* @param {Object} props - Properties
* @param {Object} props.grading - Grading of an activity
* @param {number} props.randomNumber - Random nummer to generate color of the card
* @param {number} props.questionNumber - Number of the queation
* @param {number} props.activityType - Activity type
* @returns {Object} The backside of a grading card
*/
export default function GradingCardBack(props) {
// Retrieve props
const grading = props.grading;
const randomNumber = props.random;
const questionNumber = props.questionNumber;
const activityType = props.activityType;
// Initialization of modal view (overlay showing the front side of the grading card)
const [modalVisible, setModalVisible] = React.useState(false);
const toggleModalVisibility = () => {
setModalVisible(!modalVisible);
};
const displayModal = () => setModalVisible(true);
// Set the "random" background color of the card (this should be moved to formatterUtils)
const cardColors = [
'#008AAC', // blue
'#1D71B8',
'#662D91', // purple
'#D74539',
'#435D35', // green
'#EB7575', // pink
];
const nb = cardColors.length;
let cardColor = null;
const number = grading.questionId + randomNumber;
let i = 0;
while (cardColor == null) {
if (number % (nb - i) === 0) {
cardColor = cardColors[i];
}
i++;
}
// Image corresponding to the given mood
const emojiImage = getEmojiImage(grading.grading);
return (
<View
style={[
styles.container,
globalStyles.shadow,
{backgroundColor: cardColor},
]}>
<InfoBoxOverlay
modalVisible={modalVisible}
onModalRequestCloseAction={toggleModalVisibility}
onPressButtonAction={toggleModalVisibility}>
<GradingCardFront
grading={grading}
cardColor={cardColor}
activityType={activityType}
/>
</InfoBoxOverlay>
<TouchableOpacity
onPress={displayModal}
style={globalStyles.coverAll}>
<View style={styles.cardContainer}>
<View>
<Text style={[iOSxLargeTypo.body, styles.label]}>
Spørsmål
</Text>
<Text style={[iOSxLargeTypo.headline, styles.label]}>
{questionNumber}
</Text>
</View>
<View style={styles.image}>
<Image
source={emojiImage}
style={globalStyles.resetImage}
/>
</View>
</View>
</TouchableOpacity>
<DetailsRoundButton
buttonSize={RoundButtonSize.TINY}
containerStyle={styles.buttonContainer}
onPress={displayModal}
/>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
container: {
alignItems: 'center',
width: '27%',
aspectRatio: 2 / 3,
margin: 5,
paddingTop: 3,
paddingHorizontal: 2,
borderWidth: 4,
borderRadius: 10,
borderColor: '#FFCD4C',
},
cardContainer: {
flex: 1,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'flex-start',
alignContent: 'center',
marginTop: 10,
},
label: {
lineHeight: 24,
textAlign: 'center',
color: 'white',
},
image: {
marginTop: 10,
width: 40,
height: 40,
},
buttonContainer: {
flex: 1,
position: 'absolute',
bottom: -20,
right: 0,
},
});