import React, {Fragment} from 'react';
import {Text, View, StyleSheet } from '@react-pdf/renderer';

const borderColor = '#90e5fc'
const styles = StyleSheet.create({
    therow: {
        flexDirection: 'column',
        width: '100%'
    },
    row: {
        flexDirection: 'row',
        borderBottomColor: '#bff0fd',
        borderBottomWidth: 1,
        alignItems: 'center',
        height: 50,
        fontStyle: 'bold',
        flexGrow: 1
    },
    aColumn: {
        textAlign: 'center',
        borderLeftColor: borderColor,
        borderLeftWidth: 1,
        borderRightColor: borderColor,
        borderRightWidth: 1,
        flex: 1,
    },
    /*
    description: {
        width: '60%',
        textAlign: 'left',
        borderRightColor: borderColor,
        borderRightWidth: 1,
        paddingLeft: 8,
    },
    qty: {
        width: '10%',
        borderRightColor: borderColor,
        borderRightWidth: 1,
        textAlign: 'right',
        paddingRight: 8,
    },
    rate: {
        width: '15%',
        borderRightColor: borderColor,
        borderRightWidth: 1,
        textAlign: 'right',
        paddingRight: 8,
    },
    amount: {
        width: '15%',
        textAlign: 'right',
        paddingRight: 8,
    },*/
  })

const eachDataColumn = (keys, item) => (
    keys.map((theKey, index) => 
        <Text key={`col-${index}`} style={styles.aColumn}>{item[theKey]}</Text>
    )
)

const ReportTableRow = ({keys, items}) => {
    const rows = items.map( (item, index) => 
        <View style={styles.therow} key={`row-${index}`}>
            <View style={styles.row}>
                
                  {
                      eachDataColumn(keys, item)
                  }              
            </View>                
        </View>
    )
    return (<Fragment>{rows}</Fragment> )
}
  
export default ReportTableRow