lti-web-client/src/components/helper/pdf/table/PdfTbody.tsx

'use client';

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

export interface PdfColumn {
  key: string;
  header: string;
  flex: number;
  align?: 'left' | 'center' | 'right';
}

export interface PdfTbodyCell {
  key: string;
  value: string | number | React.ReactNode;
  align?: 'left' | 'center' | 'right';
  color?: string;
  formatAs?: 'text' | 'date' | 'currency' | 'number';
  formatDate?: string;
}

const styles = StyleSheet.create({
  tableRow: {
    flexDirection: 'row',
  },
  tableBorderBottom: {
    borderBottomWidth: 1,
    borderBottomColor: '#000000',
    borderBottomStyle: 'solid',
  },
  tableCell: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'left',
  },
  tableCellLast: {
    flex: 1,
    padding: 4,
    fontSize: 7,
    borderRightWidth: 0,
  },
  tableCellRight: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'right',
  },
  tableCellCenter: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'center',
  },
  tableCellNo: {
    flex: 0.5,
    borderRightWidth: 1,
    borderRightColor: '#000000',
    borderRightStyle: 'solid',
    padding: 4,
    fontSize: 7,
    textAlign: 'center',
  },
});

interface PdfTbodyProps {
  columns: PdfColumn[];
  rows: PdfTbodyCell[][];
  firstRow?: {
    valueKey: string;
    value: number;
    align?: 'right';
    color?: string;
  };
  formatDate?: (date: string, format: string) => string;
  formatNumber?: (num: number) => string;
  formatCurrency?: (num: number) => string;
}

export const PdfTbody = ({ columns, rows, firstRow }: PdfTbodyProps) => {
  return (
    <>
      {/* First Row */}
      {firstRow && (
        <View style={[styles.tableRow, styles.tableBorderBottom]}>
          {columns.map((column, index) => {
            const isLastColumn = index === columns.length - 1;
            const isfirstRowColumn = column.key === firstRow.valueKey;
            const align = column.align || 'center';

            const cellStyle =
              column.key === 'no'
                ? [styles.tableCellNo, { flex: column.flex }]
                : isfirstRowColumn
                  ? [
                      styles.tableCellRight,
                      {
                        flex: column.flex,
                        color: firstRow.color || 'black',
                        borderRightWidth: isLastColumn ? 0 : 1,
                      },
                    ]
                  : align === 'right'
                    ? [
                        styles.tableCellRight,
                        {
                          flex: column.flex,
                          borderRightWidth: isLastColumn ? 0 : 1,
                        },
                      ]
                    : align === 'center'
                      ? [
                          styles.tableCellCenter,
                          {
                            flex: column.flex,
                            borderRightWidth: isLastColumn ? 0 : 1,
                          },
                        ]
                      : isLastColumn
                        ? [
                            styles.tableCellLast,
                            {
                              flex: column.flex,
                              borderRightWidth: 0,
                            },
                          ]
                        : [styles.tableCell, { flex: column.flex }];

            return (
              <View key={column.key} style={cellStyle}>
                <Text>{isfirstRowColumn ? firstRow.value : ''}</Text>
              </View>
            );
          })}
        </View>
      )}

      {/* Data Rows */}
      {rows.map((row, rowIndex) => {
        const isLastRow = rowIndex === rows.length - 1;

        return (
          <View
            key={rowIndex}
            style={[
              styles.tableRow,
              !isLastRow ? styles.tableBorderBottom : {},
            ]}
          >
            {columns.map((column, colIndex) => {
              const cell = row.find((c) => c.key === column.key);
              const isLastColumn = colIndex === columns.length - 1;
              const align = cell?.align || column.align || 'center';

              const cellStyle =
                column.key === 'no'
                  ? [styles.tableCellNo, { flex: column.flex }]
                  : align === 'right'
                    ? [
                        styles.tableCellRight,
                        {
                          flex: column.flex,
                          color: cell?.color || 'black',
                          borderRightWidth: isLastColumn ? 0 : 1,
                        },
                      ]
                    : align === 'center'
                      ? [
                          styles.tableCellCenter,
                          {
                            flex: column.flex,
                            color: cell?.color || 'black',
                            borderRightWidth: isLastColumn ? 0 : 1,
                          },
                        ]
                      : isLastColumn
                        ? [
                            styles.tableCellLast,
                            { flex: column.flex, borderRightWidth: 0 },
                          ]
                        : [
                            styles.tableCell,
                            {
                              flex: column.flex,
                              color: cell?.color || 'black',
                              borderRightWidth: isLastColumn ? 0 : 1,
                            },
                          ];

              return (
                <View key={column.key} style={cellStyle}>
                  {cell?.value !== undefined &&
                  cell?.value !== null &&
                  cell?.value !== '' ? (
                    typeof cell.value === 'object' ? (
                      cell.value
                    ) : (
                      <Text>{String(cell.value)}</Text>
                    )
                  ) : (
                    <Text>-</Text>
                  )}
                </View>
              );
            })}
          </View>
        );
      })}
    </>
  );
};