Home Reference Source

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,
    },
});