// GradeDeNumeros: uma tabela de células de borda fina (2 × 2 ou 2 × 3) com um número gigante em cada uma. Cada célula entra por corte:
// aparece invertida por 3 quadros e assenta, enquanto o número conta de 0 ao valor em 10 quadros.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_D, FONTE_T, c01, caber, e5, seg} from '../base';
import {inverso} from '../formas/Quadro';

export type Celula = {valor: number; casas?: number; sufixo?: string; rotulo: string};
export type GradeDeNumerosProps = {celulas: Celula[]; cor?: string; inicio?: number; intervalo?: number; y?: number};

export const GradeDeNumeros: React.FC<GradeDeNumerosProps> = ({celulas, cor = COR.preto, inicio = 0, intervalo = 5, y = 740}) => {
  const f = useCurrentFrame();
  const fundo = inverso(cor), W = 448, H = 380, linhas = Math.ceil(celulas.length / 2);
  const topo = y - (linhas * H) / 2;
  return <div style={{position: 'absolute', inset: 0}}>
    {celulas.map((c, i) => {
      const t0 = inicio + i * intervalo, vis = f >= t0, inv = f >= t0 && f < t0 + 3, n = e5(seg(f, t0 + 1, t0 + 12));
      const col = i % 2, lin = Math.floor(i / 2);
      const txt = (c.valor * n).toFixed(c.casas ?? 0).replace('.', ',') + (c.sufixo ?? '');
      const tam = caber(txt, 150, W - 60, 800, -0.05);
      return <div key={i} style={{position: 'absolute', left: 96 + col * (W - 4), top: topo + lin * (H - 4), width: W, height: H, boxSizing: 'border-box', border: `4px solid ${cor}`, background: inv ? cor : fundo, color: inv ? fundo : cor, opacity: vis ? 1 : 0, padding: 30}}>
        <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.1em', textTransform: 'uppercase'}}>{String(i + 1).padStart(2, '0')} / {c.rotulo}</div>
        <div style={{position: 'absolute', left: 30, bottom: 34, fontFamily: FONTE_D, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 1}}>{txt}</div>
      </div>;
    })}
  </div>;
};