import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer'
import SmokeLogTemplate from './tabs/smoke-logs/smoke-log.template'
import AlcoholLogTemplate from './tabs/alcohol-logs/alcohol-log.template'
import ErectileLogTemplate from './tabs/erectile-logs/erectile-log.template'
import DepressionLogTemplate from './tabs/depression-logs/depression-log.template'
import MedicalLogTemplate from './tabs/medical-logs/medical-log.template'
import logo from '../app-header/assets/metta-logo.png'
import  ReportTitle  from '../utility/pdf-templates/report-title.template'
import ReportOf  from '../utility/pdf-templates/report-of.template'

const styles = StyleSheet.create({
    page: {
        fontFamily: 'Helvetica',
        fontSize: 9,
        backgroundColor: "#ffffff",
        paddingTop: 20,
        paddingLeft:20,
        paddingRight:20,
        lineHeight: 1.5,
    },
    pageHeader: {
        fontSize: 8,        
        borderBottom: "1px solid rgb(212, 212, 212)",
        padding: 5

    },
    section: {
        margin: 5,
        padding: 2,
        flexGrow: 1,
        flexDirection: "row",
    },
    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

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

    },
    logo: {
        width: 120,
        height: 66,
        marginLeft: 'auto',
        marginRight: 'auto'
    }

})

const CaseHistoryTemplateDocument = ({data}) => {
    const entity = data[0]
    return (
        <Document>
            <Page size="A4" style={styles.page} wrap>   
                <View fixed>
                    <Image style={styles.logo} src={logo} />
                    <ReportTitle title='Medical History'/>
                    <ReportOf person={entity}/>                   
                </View>
                {
                    !!entity ?
                    <>
                        <MedicalLogTemplate data={entity}/>
                        {
                            !!entity.SmokeLog ? 
                                <SmokeLogTemplate  data={JSON.parse(entity.SmokeLog)}/>: null
                        }
                        {
                            !!entity.AlcoholLog ?
                                <AlcoholLogTemplate  data={JSON.parse(entity.AlcoholLog)}/>:
                                null
                        }
                        {
                            !!entity.DepressionLog ?
                                <DepressionLogTemplate  data={JSON.parse(entity.DepressionLog)}/>:
                                null
                        }
                        {
                            !!entity.ErectileLog ?
                                <ErectileLogTemplate  data={JSON.parse(entity.ErectileLog)} />:
                                null
                        }
                    </>:
                    <Text>No Data Present</Text>
                }             
                
            </Page>
        </Document>
  )
}
export default CaseHistoryTemplateDocument