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

import type { DatasheetVoltageTable } from '../../model/types';
import { styles } from '../styles';

function clamp(n: number, min: number, max: number): number {
  return Math.max(min, Math.min(max, n));
}

export function DenseTable(props: {
  table: Pick<DatasheetVoltageTable, 'columns' | 'rows'>;
  firstColLabel: string;
}): React.ReactElement {
  const cols = props.table.columns;
  const rows = props.table.rows;

  const cfgPct = cols.length >= 12 ? 0.28 : 0.32;
  const dataPct = 1 - cfgPct;
  const each = cols.length ? dataPct / cols.length : dataPct;
  const cfgW = `${Math.round(cfgPct * 100)}%`;
  const dataW = `${Math.round(clamp(each, 0.03, 0.12) * 1000) / 10}%`;

  return (
    <View style={styles.tableWrap}>
      <View style={styles.tableHeader}>
        <View style={{ width: cfgW }}>
          <Text style={styles.tableHeaderCell}>{props.firstColLabel}</Text>
        </View>
        {cols.map(c => (
          <View key={c.key} style={{ width: dataW }}>
            <Text style={styles.tableHeaderCell}>{c.label}</Text>
          </View>
        ))}
      </View>

      {rows.map((r, ri) => (
        <View key={`${r.configuration}-${ri}`} style={[styles.tableRow, ri % 2 === 0 ? styles.tableRowAlt : null]}>
          <View style={{ width: cfgW }}>
            <Text style={styles.tableCell}>{r.configuration}</Text>
          </View>
          {r.cells.map((cell, ci) => (
            <View key={`${cols[ci]?.key || ci}`} style={{ width: dataW }}>
              <Text style={styles.tableCell}>{cell}</Text>
            </View>
          ))}
        </View>
      ))}
    </View>
  );
}