import React from 'react';
import { DataColumnExtra, TableContext } from '../types/table.type';
import { TableBodySummaryCell, TableBodySummaryCellContent } from './style';

export interface DataTableBodySummaryProps {
    style: React.CSSProperties,
    align?: "left" | "center" | "right" | "justify" | "inherit",
    context: TableContext,
    column: DataColumnExtra,
}

export const DataTableBodySummary: React.FC<DataTableBodySummaryProps> = ({ style, align, context, column }) => {
    const currentValue = context.data && context.data.rows && context.data.rows.length > 0 &&
        column.summary && column.summary.formula
        ? column.summary.formula(context.data.rows.map(x => x[column.name]))
        : null

    return (
        <TableBodySummaryCell align={align} style={style}>
            <TableBodySummaryCellContent style={{ backgroundImage: 'inherit' }}>
                {
                    currentValue || currentValue === 0
                        ? column.summary && column.summary.label
                            ? `${column.summary.label} ${currentValue}`
                            : `${currentValue}`
                        : ''
                }
            </TableBodySummaryCellContent>
        </TableBodySummaryCell>
    )
}