// TituloRabisco: 1 a 3 linhas em Permanent Marker, escritas da esquerda para a direita (máscara que abre) com o traço tremendo.
// A linha `destaque` ganha uma faixa de marca-texto amarela que passa por trás e um sublinhado de caneta azul que se desenha.
import React from 'react';
import {COR, FONTE_TITULO, LARGURA_UTIL, caber, larguraTexto, mola, seg, useF} from '../base';
import {ferver, traco} from '../lib/traco';

export type TituloRabiscoProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; destaque?: number; fim?: number};
export const TituloRabisco: React.FC<TituloRabiscoProps> = ({linhas, inicio = 0, intervalo = 10, y = 720, tamanho = 200, destaque = 1, fim}) => {
  const f = useF();
  const tams = linhas.map((l) => caber(l, tamanho, LARGURA_UTIL - 20, FONTE_TITULO, 400, 0));
  const alts = tams.map((t) => t * 1.3);
  const total = alts.reduce((a, b) => a + b, 0);
  let acc = y - total / 2;
  return <>{linhas.map((l, i) => {
    const topo = acc; acc += alts[i];
    const t0 = inicio + i * intervalo;
    const esc = seg(f, t0, t0 + 9);
    const w = larguraTexto(l, tams[i], FONTE_TITULO, 400, 0);
    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
    const hl = i === destaque ? mola(seg(f, t0 + 8, t0 + 18), 1.2) : 0;
    const x0 = (1080 - w) / 2;
    return <div key={i} style={{position: 'absolute', left: 0, right: 0, top: topo, height: alts[i], opacity: 1 - sai, transform: `translateY(${sai * -300}px) rotate(${(i % 2 ? 1.2 : -1.2)}deg)`}}>
      {i === destaque && <div style={{position: 'absolute', left: x0 - 18, top: alts[i] * 0.22, width: (w + 36) * hl, height: alts[i] * 0.62, background: COR.marca, mixBlendMode: 'multiply', transform: 'rotate(-1.5deg)', borderRadius: 8}} />}
      <div style={{position: 'absolute', left: x0, top: 0, width: w + 20, height: alts[i], filter: ferver(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% -2%)`, fontFamily: FONTE_TITULO, fontSize: tams[i], lineHeight: `${alts[i]}px`, color: COR.tinta, whiteSpace: 'nowrap'}}>{l}</div>
      {i === destaque && <svg width={w + 80} height={60} style={{position: 'absolute', left: x0 - 30, top: alts[i] * 0.92, overflow: 'visible', filter: ferver(f)}}><path d={`M6 30 C${w * 0.25} 6 ${w * 0.5} 52 ${w * 0.75} 22 S${w + 50} 40 ${w + 60} 18`} {...traco(seg(f, t0 + 12, t0 + 24), COR.azul, 9)} /></svg>}
    </div>;
  })}</>;
};