// FormaNeon: seta, moldura, estrela, raio, coração ou círculo em tubo. O contorno se desenha de ponta a ponta
// (pathLength, 20 quadros) e depois acende com tremida. Três camadas: halo largo borrado, tubo médio e miolo branco.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, acende, e5, seg} from '../base';

export type TipoNeon = 'seta' | 'moldura' | 'estrela' | 'raio' | 'coracao' | 'circulo';
const CAMINHOS: Record<TipoNeon, string> = {
  seta: 'M10 50 H80 M56 20 L88 50 L56 80',
  moldura: 'M24 8 H76 Q92 8 92 24 V76 Q92 92 76 92 H24 Q8 92 8 76 V24 Q8 8 24 8 Z',
  estrela: 'M50 8 L61 38 L93 40 L68 60 L77 92 L50 74 L23 92 L32 60 L7 40 L39 38 Z',
  raio: 'M58 6 L22 56 H46 L38 94 L78 40 H54 Z',
  coracao: 'M50 88 C12 60 6 38 18 24 C28 12 44 16 50 30 C56 16 72 12 82 24 C94 38 88 60 50 88 Z',
  circulo: 'M50 8 A42 42 0 1 1 49.9 8 Z',
};

export type FormaNeonProps = {
  tipo: TipoNeon;
  x?: number;
  y?: number;
  /** largura/altura em px (a forma é quadrada; a seta usa 2:1 dentro dela) */
  tamanho?: number;
  rot?: number;
  cor?: string;
  inicio?: number;
  /** espessura do tubo em px */
  tubo?: number;
};

export const FormaNeon: React.FC<FormaNeonProps> = ({tipo, x = 540, y = 1140, tamanho = 300, rot = 0, cor = COR.ciano, inicio = 0, tubo = 14}) => {
  const f = useCurrentFrame();
  if (f < inicio) return null;
  const p = e5(seg(f, inicio, inicio + 20)), k = acende(f, inicio + 20, 3), esc = 100 / tamanho;
  const lum = p < 1 ? 0.5 : k;
  const traço = {fill: 'none', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, pathLength: 1, strokeDasharray: '1 1.1', strokeDashoffset: 1 - p};
  return <svg width={tamanho} height={tamanho} viewBox="0 0 100 100" style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, overflow: 'visible', transform: `rotate(${rot}deg)`}}>
    <defs><filter id="nc-halo" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3.2" /></filter></defs>
    <path d={CAMINHOS[tipo]} {...traço} stroke={cor} strokeWidth={tubo * 2.6 * esc} opacity={0.55 * lum} filter="url(#nc-halo)" />
    <path d={CAMINHOS[tipo]} {...traço} stroke={cor} strokeWidth={tubo * 1.3 * esc} opacity={lum} />
    <path d={CAMINHOS[tipo]} {...traço} stroke={COR.branco} strokeWidth={tubo * 0.5 * esc} opacity={Math.min(1, lum * 1.1)} />
  </svg>;
};