import React from 'react';
import { Text, View, StyleSheet, Image } from '@react-pdf/renderer'
// import ReportTitle from '../../../utility/pdf-templates/report-title.template'
import  ReportItemsTable  from '../../../utility/pdf-templates/tabular/report-item.table.template'

import logo from '../../../app-header/assets/metta-logo.png'
import { genderOptions, familyHistoryOptions, addictionOptions, medicalHistoryOptions} from './medical-logs.questions.options'

const styles = StyleSheet.create({
    page: {
        fontFamily: 'Helvetica',
        fontSize: 11,
        paddingTop: 30,
        paddingLeft:60,
        paddingRight:60,
        lineHeight: 1.5,
        flexDirection: 'column',
    }, 
    paddingVertical: {
        paddingTop: 20,
        paddingBottom: 20
    },  
    logo: {
        width: 120,
        height: 66,
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    section: {
        margin: 5,
        padding: 2,
        flexGrow: 1,
        flexDirection: "row",
    },
    element30: {
        width: '30%',
        padding: 8,
        textAlign: 'center'
    },
    element50: {
        width: '50%',
        padding: 8,
        textAlign: 'center'
    },
    column: {
        flexGrow: 1,
        flexDirection: "column",
    },
    recordContainer:{
        display: "flex",
        flexDirection: "column",
        padding: 5,
        margin: 20,
        border: "1px solid rgb(212, 212, 212)"
    },
    label:{
        fontSize: 10,
        fontWeight: "bold",
        borderBottom: "1px solid rgb(212, 212, 212)",
        backgroundColor: "lightgrey",
        padding: 5,
        textAlign: 'center'

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

})

const stringAccumulators = (checkIds, sourceOptions) => {
    var elements = []
    checkIds.forEach((theId) =>{
        elements.push(sourceOptions.reduce((accumulated, item) => item.value === theId ? accumulated + item.key : accumulated, ""))                    
    })
    return elements.join(",")
}

const MedicalLogTemplate = ({data}) => {
    let medHistories = data.MedicalHistory.map((ele, ind) => {
            return {...ele,
                DiseaseType: stringAccumulators([ele.DiseaseType], medicalHistoryOptions)
            }
        }
    )
    return (
    <View style={styles.page}>
        <View style={styles.section}>
            <View style={styles.element50}>
                <Text style={styles.label}>Date Of Birth (DD-MM-YYYY)</Text>
                <Text style={styles.attributeValue}>{data.DOB}</Text>
            </View>
            <View style={styles.element50}>

                <Text style={styles.label}>Gender</Text>
                <Text style={styles.attributeValue}>{
                    genderOptions.map((ele, index) => 
                        ele.value === data.Gender ? ele.key : ""
                    )
                    
                }</Text>
            </View>            
        </View>
        <View style={styles.section}>
            <View style={styles.element30}>
                <Text style={styles.label}>Height (cm)</Text>
                <Text style={styles.attributeValue}>{data.HeightInMeter}</Text>            
            </View>
            <View style={styles.element30}>
                <Text style={styles.label}>Weight (kg)</Text>
                <Text style={styles.attributeValue}>{data.WeightInKgs}</Text>
            </View>
            <View style={styles.element30}>

                <Text style={styles.label}>Waist Circumference (cm)</Text>
                <Text style={styles.attributeValue}>{data.WaistCurInCms}</Text>
            </View>
        </View>
        <View style={styles.section}>
            <View style={styles.element50}>
                <Text style={styles.label}>BMI (kg/m2)</Text>
                <Text style={styles.attributeValue}>{data.BMI}</Text>
            </View>
            <View style={styles.element50}>
                <Text style={styles.label}>BP (mmhg)</Text>
                <Text style={styles.attributeValue}>{data.BPInMmhg}</Text>
            </View>
        </View>
        <View style={styles.section}>
            
            <View style={styles.element30}>
                <Text style={styles.label}>Family History</Text>
                <Text style={styles.attributeValue}>{
                    stringAccumulators(data.FamilyHistoryIdsMasked, familyHistoryOptions)                
                }</Text>
            </View>
            <View style={styles.element30}>
                <Text style={styles.label}>Addictions</Text>
                <Text style={styles.attributeValue}>{
                    stringAccumulators(data.AddictionIdsMasked, addictionOptions)                                
                }</Text>
            </View>
        </View>
                        
    {/* medical history */}
            {
                <View break style={styles.paddingVertical} key={`medical_history`}>
                    <Text style={styles.label}>Medical History</Text>
                    <ReportItemsTable 
                        labels={["Disease Type","From Date (DD-MM-YYYY)","To Date (DD-MM-YYYY)"]} 
                        fields={["DiseaseType","FromDate","ToDate"]} 
                        reportData={{items: medHistories}} />                        
                </View>                
            }
    {/* medications */}
            {
                    <View break style={styles.paddingVertical} key={`medication`}>
                        <Text style={styles.label}>Medications</Text>
                        <ReportItemsTable 
                            labels={["Medicine","Dosage","Start Date (DD-MM-YYYY)"]} 
                            fields={["MedicationName","Doses","StartDate"]} 
                            reportData={{items: data.Medications}} />                        
                    </View>
                   
            }
    {/* surgery details */}
            {
                <View break style={styles.paddingVertical} key={`surgery_details`}>
                    <Text style={styles.label}>Surgery Details</Text>
                    <ReportItemsTable 
                        labels={["Surgery Name","On Date (DD-MM-YYYY)"]} 
                        fields={["SurgeryName","SurgeryDate"]} 
                        reportData={{items: data.SurgeryDetails}} />                        
                </View>                
            }
    </View>
)}

export default MedicalLogTemplate
