// TextoGrande: frases grandes impressas no tubo (VT323 até 150 px), cada linha digitada com a cadência
// humana, com cursor de bloco no fim da última. `quente` pinta a linha com o acento.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {BLOOM, COR, FONTE, GRADE, cadencia, digitados} from '../base';

export type TextoGrandeProps = {
  linhas: {texto: string; tamanho?: number; quente?: boolean}[];
  y?: number;
  inicio?: number;
  /** quadros entre o fim de uma linha e o começo da próxima */
  pausa?: number;
  cursor?: boolean;
};

export const TextoGrande: React.FC<TextoGrandeProps> = ({linhas, y = 300, inicio = 0, pausa = 4, cursor = true}) => {
  const f = useCurrentFrame() - inicio;
  if (f < 0) return null;
  let t0 = 0, top = y;
  return <>{linhas.map((l, i) => {
    const tam = l.tamanho ?? 120;
    const tempos = cadencia(l.texto, i + 5).map((x) => x * 0.5);
    const comeca = t0; const n = digitados(f - comeca, tempos);
    t0 += (tempos[tempos.length - 1] ?? 0) + pausa;
    const meuTop = top; top += tam * 1.05;
    if (f < comeca) return null;
    const ultima = i === linhas.length - 1;
    const cor = l.quente ? COR.quente : COR.fosforo;
    const pisca = n < l.texto.length || Math.floor(f / 8) % 2 === 0;
    return <div key={i} style={{position: 'absolute', left: GRADE.margem, top: meuTop, fontFamily: FONTE, fontSize: tam, lineHeight: 1, color: cor, textShadow: BLOOM(COR.fosforo, 1.2), whiteSpace: 'pre'}}>
      {l.texto.slice(0, n)}
      {cursor && (ultima || n < l.texto.length) && pisca && <span style={{display: 'inline-block', width: tam * 0.5, height: tam * 0.8, background: COR.quente, verticalAlign: '-0.05em', boxShadow: BLOOM(COR.fosforo, 0.8)}} />}
    </div>;
  })}</>;
};