// SetaCurva: seta desenhada à mão: uma curva (quadrática) que se traça do ponto `de` ao ponto `ate` e fecha com a ponta em V.
// Em coordenadas da tela. O traço de 12 px, azul-marinho, termina com uma pequena batida (a ponta pula).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, e5, ov, seg} from '../base';

export type SetaCurvaProps = {
  de: [number, number];
  ate: [number, number];
  /** quanto a curva sai da reta (px, com sinal) */
  curva?: number;
  cor?: string;
  inicio?: number;
  /** quadros para desenhar o traço */
  duracao?: number;
  espessura?: number;
  fim?: number;
};

export const SetaCurva: React.FC<SetaCurvaProps> = ({de, ate, curva = 120, cor = COR.tinta, inicio = 0, duracao = 18, espessura = 12, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 8) return null;
  const mx = (de[0] + ate[0]) / 2, my = (de[1] + ate[1]) / 2;
  const dx = ate[0] - de[0], dy = ate[1] - de[1], len = Math.hypot(dx, dy) || 1;
  const cx = mx - (dy / len) * curva, cy = my + (dx / len) * curva;
  const p = e5(seg(f, inicio, inicio + duracao)), ponta = ov(seg(f, inicio + duracao - 2, inicio + duracao + 8)), sai = 1 - seg(f, fim, fim + 8);
  const ang = Math.atan2(ate[1] - cy, ate[0] - cx);
  const a = (r: number) => `${ate[0] + Math.cos(ang + r) * -46} ${ate[1] + Math.sin(ang + r) * -46}`;
  return <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible', opacity: sai}}>
    <path d={`M${de[0]} ${de[1]} Q${cx} ${cy} ${ate[0]} ${ate[1]}`} pathLength={1} fill="none" stroke={cor} strokeWidth={espessura} strokeLinecap="round" strokeDasharray={1} strokeDashoffset={1 - p} />
    {f >= inicio + duracao - 2 && <path d={`M${a(0.55)} L${ate[0]} ${ate[1]} L${a(-0.55)}`} fill="none" stroke={cor} strokeWidth={espessura} strokeLinecap="round" strokeLinejoin="round" transform={`translate(${ate[0]} ${ate[1]}) scale(${ponta}) translate(${-ate[0]} ${-ate[1]})`} />}
  </svg>;
};