// TituloLocal: o nome do lugar em DM Sans 800 branco sobre o magenta, até 2 linhas, subindo de uma máscara com overshoot.
// `*palavra*` ganha um bloco creme com letra magenta. Embaixo, uma linha de apoio e um traço de rota que se desenha.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, LARGURA, MONO, caber, e5, ov, partes, seg, textoLimpo} from '../base';

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

export const TituloLocal: React.FC<TituloLocalProps> = ({linhas, apoio, inicio = 0, y, tamanho = 230, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l), tamanho, 880, 800, -0.04, 'MP DM Sans')));
  const alt = tam * 1.12, topo = y - (linhas.length * alt) / 2, sai = e5(seg(f, fim, fim + 10));
  const traco = e5(seg(f, inicio + 16, inicio + 36));
  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 * 6, inicio + i * 6 + 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}%)`, fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: `${alt}px`, color: '#fff', letterSpacing: '-0.04em', whiteSpace: 'nowrap'}}>
          {partes(l).map((s, k) => s.d ? <span key={k} style={{background: COR.creme, color: COR.magenta, borderRadius: tam * 0.14, padding: `0 ${tam * 0.1}px`}}>{s.t}</span> : <span key={k}>{s.t}</span>)}
        </div>
      </div>;
    })}
    <svg width={720} height={80} viewBox="0 0 720 80" style={{position: 'absolute', left: 180, top: topo + linhas.length * alt + 20}}>
      <path d="M10 60 L10 20 L360 20 L360 60 L710 60" pathLength={1} fill="none" stroke={COR.creme} strokeWidth={14} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={1} strokeDashoffset={1 - traco} />
      <circle cx={10} cy={60} r={12} fill={COR.creme} /><circle cx={710} cy={60} r={12} fill={COR.creme} opacity={traco > 0.98 ? 1 : 0} />
    </svg>
    <div style={{position: 'absolute', left: 0, width: LARGURA, top: topo + linhas.length * alt + 120, textAlign: 'center', fontFamily: MONO, fontWeight: 500, fontSize: 48, color: '#fff', opacity: 0.9 * seg(f, inicio + 20, inicio + 32), transform: `translateY(${(1 - ov(seg(f, inicio + 20, inicio + 36))) * 50}px)`}}>{apoio}</div>
  </div>;
};