import React from 'react';
import './SummaryRowTable.css';

function compute(data, key, type) {
  const arr = data.map((d) => Number(d[key]) || 0);
  if (!arr.length) return '';
  if (type === 'sum') return arr.reduce((a, b) => a + b, 0);
  if (type === 'avg') return +(arr.reduce((a, b) => a + b, 0) / arr.length).toFixed(1);
  if (type === 'max') return Math.max(...arr);
  if (type === 'min') return Math.min(...arr);
  if (type === 'count') return arr.length;
  return '';
}

export default function SummaryRowTable({
  data = [],
  columns = [],
  summary = {},
  labelKey = 'name',
  labelText = '合计 / 平均'
}) {
  return (
    <table className="kole-sumtable">
      <thead>
        <tr>
          {columns.map((c) => (
            <th key={c.key}>{c.title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            {columns.map((c) => (
              <td key={c.key} className={c.pos && row[c.key] >= c.pos ? 'is-pos' : ''}>
                {row[c.key]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr className="kole-sumrow">
          {columns.map((c) => (
            <td key={c.key} className={c.key === labelKey ? 'kole-sum-label' : ''}>
              {c.key === labelKey
                ? labelText
                : summary[c.key]
                ? compute(data, c.key, summary[c.key])
                : ''}
            </td>
          ))}
        </tr>
      </tfoot>
    </table>
  );
}