import React from 'react';
import { Text, View, StyleSheet } from '@react-pdf/renderer'
import { q1Options, q2Options, q3Options, q4Options, q5Options, questions } from './erectile-log.question.options'

const styles = StyleSheet.create({
    
    section: {
        margin: 5,
        padding: 2,
        flexGrow: 1,
        flexDirection: "column",
    },
    recordContainer:{
        display: "flex",
        flexDirection: "column",
        padding: 5,
        margin: 20,
        border: "1px solid rgb(212, 212, 212)"
    },
    label:{
        fontSize: 12,
        fontWeight: "bold",
        borderBottom: "1px solid rgb(212, 212, 212)",
        backgroundColor: "lightgrey",
        padding: 5

    },
    attributeValue: {
        fontSize: 10,
        border: "1px solid rgb(212, 212, 212)",
        padding: 5

    },
    title:{
        fontSize: 12,
        fontWeight: "bold",
        color: "#4776E6",
        textAlign: 'center'
    }

})

const stringAccumulators = (checkId, sourceOptions) => {
                        
    return sourceOptions.reduce((accumulated, item) => item.value === parseInt(checkId) ? accumulated + item.key : accumulated, "")
}

const ErectileLogTemplate = ({data}) => {
    if(!!data){
        const optionItems = [q1Options, q2Options, q3Options, q4Options, q5Options]
        const { total, ...entity} = data
        
        return (
            <View style={styles.recordContainer} break>
                <Text style={styles.title}>Erectile Logs</Text>
                {
                    Object.keys(entity).map((key, index) => (
                        <View style={styles.section} break={index >0 && index % 6 === 0 ? true : false} key={`question-${index}`}>
                            <Text style={styles.label}>{questions[key]}</Text>
                            <Text style={styles.attributeValue}>{stringAccumulators(entity[key], optionItems[index])}</Text>
                        </View>
                    ))
                }
            </View>
        )
    }else{
        return (
            <View style={styles.recordContainer} break>
                <Text style={styles.title}>No Erectile Logs</Text>
            </View>
        )
    }
}

export default ErectileLogTemplate
