// RotuloPonto: etiqueta técnica em JetBrains Mono, com moldura fina, uma linha que se desenha até um ponto-alvo
// e um anel laranja que pulsa em volta do ponto a cada 24 quadros.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FAM_B, FONTE_B, ALTURA, LARGURA, caber, larguraTexto, e5, ob, seg} from '../base';

export type RotuloPontoProps = {
  texto: string;
  /** centro da etiqueta */
  x?: number;
  y?: number;
  /** ponto que a linha aponta */
  alvo?: [number, number];
  tamanho?: number;
  inicio?: number;
};

export const RotuloPonto: React.FC<RotuloPontoProps> = ({texto, x = 540, y = 1150, alvo = [540, 900], tamanho = 52, inicio = 0}) => {
  const f = useCurrentFrame() - inicio;
  if (f < -1) return null;
  const t = caber(texto, tamanho, FAM_B, 760, 700), w = larguraTexto(texto, t, FAM_B, 700) + t * 1.4, h = t * 2;
  const p = ob(seg(f, 0, 12), 1.6), l = e5(seg(f, 6, 18)), pulso = (f % 24) / 24;
  const y0 = alvo[1] < y ? y - h / 2 : y + h / 2;
  return <>
    <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
      <line x1={x} y1={y0} x2={x + (alvo[0] - x) * l} y2={y0 + (alvo[1] - y0) * l} stroke={COR.gelo} strokeWidth={2.5} />
      <circle cx={alvo[0]} cy={alvo[1]} r={9 * l} fill={COR.laranja} />
      <circle cx={alvo[0]} cy={alvo[1]} r={14 + pulso * 34} fill="none" stroke={COR.laranja} strokeWidth={3} opacity={l * (1 - pulso)} />
    </svg>
    <div style={{position: 'absolute', left: x - w / 2, top: y - h / 2, width: w, height: h, border: `3px solid ${COR.gelo}`, borderRadius: 10, background: COR.azulEscuro, color: COR.branco, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_B, fontWeight: 700, fontSize: t, whiteSpace: 'nowrap', transform: `scale(${p})`}}>{texto}</div>
  </>;
};