// TituloTela: o título do tutorial, grande (96 px, peso 800, −0,03 em), alinhado à esquerda em x 88.
// Palavras sobem 40 px uma a uma (3 quadros entre elas); a parte entre *asteriscos* ganha um marca-texto
// laranja que corre da esquerda (10 quadros). Sai subindo e sumindo.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, SEGURA, e5, entradaSaida, seg} from '../base';

export type TituloTelaProps = {linhas: string[]; y?: number; tamanho?: number; inicio?: number; fim?: number; alinhar?: 'esquerda' | 'centro'};

export const TituloTela: React.FC<TituloTelaProps> = ({linhas, y = 300, tamanho = 96, inicio = 0, fim = -1, alinhar = 'esquerda'}) => {
  const f = useCurrentFrame();
  const {s} = entradaSaida(f, inicio, fim);
  let k = 0;
  return <div style={{position: 'absolute', left: SEGURA.lado, right: SEGURA.lado, top: y, opacity: 1 - s, transform: `translateY(${-s * 80}px)`, textAlign: alinhar === 'centro' ? 'center' : 'left'}}>
    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE, fontWeight: 800, fontSize: tamanho, lineHeight: 1.08, letterSpacing: '-0.03em', color: COR.tinta}}>
      {l.split(/(\*[^*]+\*)/).filter(Boolean).map((p, j) => {
        const marca = p.startsWith('*');
        return p.replace(/\*/g, '').split(' ').filter(Boolean).map((w, wi) => {
          const em = inicio + (k++) * 3;
          const t = e5(seg(f, em, em + 12));
          const m = e5(seg(f, em + 6, em + 16));
          return <span key={`${j}-${wi}`} style={{display: 'inline-block', marginRight: '0.24em', opacity: t, transform: `translateY(${(1 - t) * 40}px)`, position: 'relative', color: marca ? '#fff' : undefined}}>
            {marca && <span style={{position: 'absolute', left: '-0.08em', right: '-0.08em', top: '0.1em', bottom: '0.02em', background: COR.acento, borderRadius: 10, transform: `scaleX(${m})`, transformOrigin: '0 50%', zIndex: -1}} />}
            <span style={{position: 'relative'}}>{w}</span>
          </span>;
        });
      })}
    </div>)}
  </div>;
};