// TituloPixel: 1 a 3 linhas enormes em Press Start 2P com contorno e sombra dura. Cada linha cai de cima em passos e quica.
// `linhas`: texto (ou {texto, cor, tamanho}); as cores se alternam em COR.amarelo / COR.creme / COR.magenta.
import React from 'react';
import {COR, FONTE_TITULO, LARGURA_UTIL, caber, mola, seg, useF} from '../base';

export type LinhaPixel = string | {texto: string; cor?: string; tamanho?: number};
export type TituloPixelProps = {linhas: LinhaPixel[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; cores?: string[]; fim?: number};

const contorno = (c: string, n: number, sombra: number) => {
  const p: string[] = [];
  for (const [a, b] of [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [-1, -1], [1, -1], [-1, 1]]) p.push(`${a * n}px ${b * n}px 0 ${c}`);
  for (let k = n; k <= sombra; k += n) p.push(`${k}px ${k + n}px 0 ${c}`);
  return p.join(',');
};

export const TituloPixel: React.FC<TituloPixelProps> = ({linhas, inicio = 0, intervalo = 6, y = 700, tamanho = 130, cores = [COR.amarelo, COR.creme, COR.magenta], fim}) => {
  const f = useF();
  const L = linhas.map((l) => (typeof l === 'string' ? {texto: l} : l));
  const tams = L.map((l) => caber(l.texto, l.tamanho ?? tamanho, LARGURA_UTIL - 40, FONTE_TITULO, 400, 0));
  const passos = tams.map((t) => t * 1.35);
  const total = passos.reduce((a, b) => a + b, 0);
  let acc = y - total / 2;
  return <>{L.map((l, i) => {
    const topo = acc; acc += passos[i];
    const t0 = inicio + i * intervalo;
    const p = mola(seg(f, t0, t0 + 10), 2.2);
    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
    const cor = l.cor ?? cores[i % cores.length];
    return <div key={i} style={{position: 'absolute', left: 0, right: 0, top: topo, textAlign: 'center', fontFamily: FONTE_TITULO, fontSize: tams[i], lineHeight: 1.1, color: cor, textShadow: contorno(COR.noite, Math.max(4, Math.round(tams[i] / 18)), Math.round(tams[i] / 7)), opacity: f >= t0 ? 1 - sai : 0, transform: `translateY(${(1 - p) * -520 - sai * 700}px) scale(${1 + (1 - p) * 0.25})`, whiteSpace: 'nowrap'}}>{l.texto}</div>;
  })}</>;
};