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

'use client';

import { Text, View, StyleSheet } from '@react-pdf/renderer';
import { ReactNode } from 'react';
import type { PdfColumn } from './types';

const styles = StyleSheet.create({
  tableRow: {
    flexDirection: 'row',
  },
  summaryRow: {
    backgroundColor: '#F0F0F0',
    fontWeight: 'bold',
  },
  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 PdfTfootProps<TData = Record<string, unknown>> {
  columns: PdfColumn<TData>[];
  data: TData[];
  label?: string;
}

export const PdfTfoot = <TData = Record<string, unknown>,>({
  columns,
  data,
  label = 'Total',
}: PdfTfootProps<TData>) => {
  return (
    <View style={[styles.tableRow, styles.summaryRow]}>
      {columns.map((column, index) => {
        const isLastColumn = index === columns.length - 1;

        // Get footer content from column definition
        let footerContent: ReactNode;
        if (typeof column.footer === 'function') {
          footerContent = column.footer(data);
        } else {
          footerContent = column.footer;
        }

        // Use label for first column (usually 'no' column)
        const displayContent = column.key === 'no' ? label : footerContent;

        // Determine alignment
        const align = column.footerAlign || column.align || 'left';
        const color = column.footerColor || 'black';

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

        return (
          <View key={column.key} style={cellStyle}>
            {displayContent !== undefined && displayContent !== null ? (
              typeof displayContent === 'string' ||
              typeof displayContent === 'number' ? (
                <Text>{String(displayContent)}</Text>
              ) : (
                displayContent
              )
            ) : (
              <Text>-</Text>
            )}
          </View>
        );
      })}
    </View>
  );
};

export type { PdfColumn };