// NoProcesso: um passo do processo como herói. Disco chapado de 560 px (coral, sol ou teal) com contorno azul-marinho de 10 px,
// o ícone desenhando o traço por dentro, o número do passo num selo e o título embaixo. Entra com overshoot e boia.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, CORES_NO, FONTE, caber, e5, ov, seg} from '../base';
import {Icone, NomeIcone} from '../formas/Icone';

export type NoProcessoProps = {
  icone: NomeIcone;
  numero: number;
  titulo: string;
  cor?: 'coral' | 'sol' | 'teal';
  inicio?: number;
  /** centro do disco, px */
  y: number;
  diametro?: number;
  fim?: number;
};

export const NoProcesso: React.FC<NoProcessoProps> = ({icone, numero, titulo, cor = 'coral', inicio = 0, y, diametro = 560, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
  const desenho = e5(seg(f, inicio + 8, inicio + 30));
  const tam = caber(titulo, 130, 880, 800, -0.03, 'IG Outfit');
  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
    <div style={{position: 'absolute', left: 540 - diametro / 2, top: y - diametro / 2 + Math.sin(f / 16) * 10, width: diametro, height: diametro, borderRadius: '50%', background: CORES_NO[cor], border: `10px solid ${COR.tinta}`, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${Math.max(0, t)}) rotate(${(1 - t) * -40}deg)`}}>
      <Icone nome={icone} tamanho={diametro * 0.56} desenho={desenho} />
      <div style={{position: 'absolute', left: 4, top: 4, width: 128, height: 128, borderRadius: 64, background: COR.tinta, color: COR.creme, fontFamily: FONTE, fontWeight: 800, fontSize: 84, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${ov(seg(f, inicio + 10, inicio + 24))})`}}>{numero}</div>
    </div>
    <div style={{position: 'absolute', left: 0, width: 1080, top: y + diametro / 2 + 50, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: 1.1, color: COR.tinta, letterSpacing: '-0.03em', opacity: seg(f, inicio + 12, inicio + 22), transform: `translateY(${(1 - ov(seg(f, inicio + 12, inicio + 28))) * 90}px)`}}>{titulo}</div>
  </div>;
};