// TituloMemphis: 1 a 3 linhas em Bowlby One, cada uma numa placa de cor chapada com contorno preto e sombra dura,
// levemente girada (±3°). Cada placa estoura de escala 0 vindo de um lado, passando do alvo e voltando.
import React from 'react';
import {COR, FONTE_TITULO, LARGURA_UTIL, caber, mola, seg, useF} from '../base';

export type LinhaMemphis = string | {texto: string; fundo?: string; cor?: string; tamanho?: number};
export type TituloMemphisProps = {linhas: LinhaMemphis[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fundos?: string[]; fim?: number};

export const TituloMemphis: React.FC<TituloMemphisProps> = ({linhas, inicio = 0, intervalo = 6, y = 700, tamanho = 170, fundos = [COR.rosa, COR.turquesa, COR.roxo, COR.laranja], 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 - 90, FONTE_TITULO, 400, 0));
  const alts = tams.map((t) => t * 1.22);
  const total = alts.reduce((a, b) => a + b, 0) + (L.length - 1) * 8;
  let acc = y - total / 2;
  return <>{L.map((l, i) => {
    const topo = acc; acc += alts[i] + 8;
    const t0 = inicio + i * intervalo;
    const p = mola(seg(f, t0, t0 + 11), 2.6);
    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
    const rot = (i % 2 ? 3 : -3) * (1 + (1 - p) * 4);
    const fundo = l.fundo ?? fundos[i % fundos.length];
    const clara = fundo === COR.amarelo || fundo === COR.turquesa || fundo === COR.branco;
    return <div key={i} style={{position: 'absolute', left: 0, right: 0, top: topo, height: alts[i], display: 'flex', justifyContent: 'center', opacity: f >= t0 ? 1 - sai : 0}}>
      <div style={{background: fundo, border: `8px solid ${COR.preto}`, boxShadow: `14px 14px 0 ${COR.preto}`, padding: `0 ${tams[i] * 0.22}px`, fontFamily: FONTE_TITULO, fontSize: tams[i], lineHeight: `${alts[i] - 16}px`, color: l.cor ?? (clara ? COR.preto : COR.branco), whiteSpace: 'nowrap', transform: `translateX(${(1 - p) * (i % 2 ? 900 : -900) - sai * 1200}px) rotate(${rot}deg) scale(${Math.max(0.01, 0.4 + p * 0.6)})`}}>{l.texto}</div>
    </div>;
  })}</>;
};