import React, { Fragment } from 'react';
import { Page, Text,  Document, Image, StyleSheet, View } from '@react-pdf/renderer'
import  ReportItemsTable  from '../../../utility/pdf-templates/tabular/report-item.table.template'
import ReportOf  from '../../../utility/pdf-templates/report-of.template'
import ReportThankYouMsg  from '../../../utility/pdf-templates/report-items.thank-you-message.template'
import  ReportTitle  from '../../../utility/pdf-templates/report-title.template'
import logo from '../../../app-header/assets/metta-logo.png'

import invoice from '../../../utility/pdf-templates/dynamic-pdf-data.default'
const labels = ["Log Date (DD-MM-YYYY)", "Log Time (24HRS)","Log Type",  "Details", "Criticality Status", "Comments"]
const fields = ["Log Date (YYYY-MM-DD)", "Log Time (24HRS)","Log Type",  "Details", "Criticality Status", "Comments"]
const entriesPerPage = 8


const styles = StyleSheet.create({
    page: {
        fontFamily: 'Helvetica',
        fontSize: 9,
        paddingTop: 60,
        paddingLeft:60,
        paddingRight:60,
        lineHeight: 1.5,
        flexDirection: 'column',
        marginBottom: 40

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

})

const DailyLogTemplateDocument = ({data}) => {
    const entity = data[0]
    var totalPages = 0
    if (!!entity){
        totalPages = Math.ceil(entity.dailyLog.length / entriesPerPage)
    }
    const pages = new Array(totalPages).fill(0)
    
    return (
        <Document>
            <Page size="A4" style={styles.page} wrap>   
                {
                    !!entity ?
                    <>
                        <View fixed>
                            <Image style={styles.logo} src={logo} />
                            <ReportTitle title='Daily Logs'/>
                            <ReportOf person={entity}/>
                        </View>
                        {/* <View>
                        <ReportItemsTable labels={labels} fields={fields} reportData={{items: entity.dailyLog.slice(0, entriesPerPage)}} />
                        </View> */}
                        <Fragment>
                            {
                                
                                pages.map((ele, index) => {
                                    console.log(ele)
                                    return (
                                    <View key={`key-${index}`} break={index === 0 ? false : true}>
                                        <ReportItemsTable labels={labels} fields={fields} reportData={{items: entity.dailyLog.slice(index * entriesPerPage, index * entriesPerPage + entriesPerPage)}} />
                                    </View>
                                    )
                                })
                                
                                
                            }
                        </Fragment>
                        
                        <ReportThankYouMsg />
                    </>:
                    <Text>No Data Present</Text>
                }             
                
            </Page>
        </Document>
  )
}
export default DailyLogTemplateDocument