// TituloEvento: o nome do evento em Unbounded 900 gigante, caixa alta, uma linha por vez subindo de dentro de uma máscara
// com overshoot e leve giro. `*palavra*` fica lima; o resto, creme. Herói do gancho.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, LARGURA, caber, e5, ov, partes, seg, textoLimpo} from '../base';

export type TituloEventoProps = {
  linhas: string[];
  inicio?: number;
  /** quadros entre linhas */
  intervalo?: number;
  /** centro vertical do bloco, px */
  y: number;
  tamanho?: number;
  fim?: number;
};

export const TituloEvento: React.FC<TituloEventoProps> = ({linhas, inicio = 0, intervalo = 6, y, tamanho = 200, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 880, 900, -0.03, 'CE Unbounded')));
  const alt = tam * 1.12, topo = y - (linhas.length * alt) / 2, sai = e5(seg(f, fim, fim + 10));
  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
    {linhas.map((l, i) => {
      const p = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16));
      return <div key={i} style={{position: 'absolute', left: 0, width: LARGURA, top: topo + i * alt, height: alt, overflow: 'hidden', textAlign: 'center'}}>
        <div style={{transform: `translateY(${(1 - p) * 115}%) rotate(${(1 - p) * (i % 2 ? 5 : -5)}deg)`, fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${alt}px`, textTransform: 'uppercase', letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>
          {partes(l).map((s, k) => <span key={k} style={{color: s.d ? COR.lima : COR.creme}}>{s.t}</span>)}
        </div>
      </div>;
    })}
  </div>;
};