// RotuloChamada: a etiqueta técnica do filme. Um ponto no detalhe do produto, uma linha fina que
// se desenha até o texto, e o texto em mono 24 px com espaçamento 0,18 em. No máximo 1 por cena.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_M, TIPO, entrada, saida, seg} from '../base';
import {useDuracaoCena} from '../transicoes/Cena';

export type RotuloChamadaProps = {
  /** ponto do produto que o rótulo aponta (px na tela 1080×1920) */
  ponto: [number, number];
  /** onde o texto começa (px) */
  texto: [number, number];
  titulo: string;
  sub?: string;
  inicio?: number;
  sai?: number;
};

export const RotuloChamada: React.FC<RotuloChamadaProps> = ({ponto, texto, titulo, sub, inicio = 0, sai = -1}) => {
  const f = useCurrentFrame();
  const dur = useDuracaoCena();
  const fim = sai < 0 ? dur + 99 : sai;
  const tOut = entrada(seg(f, fim, fim + 8));
  const tp = saida(seg(f, inicio, inicio + 8));
  const tl = saida(seg(f, inicio + 3, inicio + 16));
  const tt = saida(seg(f, inicio + 10, inicio + 22));
  const esq = texto[0] < ponto[0];
  const fimLinha: [number, number] = [texto[0] + (esq ? 0 : -14), texto[1] + 14];
  const lx = ponto[0] + (fimLinha[0] - ponto[0]) * tl, ly = ponto[1] + (fimLinha[1] - ponto[1]) * tl;
  return <div style={{position: 'absolute', inset: 0, opacity: 1 - tOut}}>
    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
      <circle cx={ponto[0]} cy={ponto[1]} r={7 * tp} fill={COR.acento} />
      <circle cx={ponto[0]} cy={ponto[1]} r={7 + 22 * seg(f, inicio, inicio + 18)} fill="none" stroke={COR.acento} strokeWidth={2} opacity={1 - seg(f, inicio, inicio + 18)} />
      <line x1={ponto[0]} y1={ponto[1]} x2={lx} y2={ly} stroke={COR.texto} strokeOpacity={0.55} strokeWidth={2} />
    </svg>
    <div style={{position: 'absolute', left: esq ? undefined : texto[0], right: esq ? 1080 - texto[0] : undefined, top: texto[1], textAlign: esq ? 'right' : 'left',
      fontFamily: FONTE_M, fontWeight: 600, fontSize: TIPO.rotulo.tamanho, letterSpacing: `${TIPO.rotulo.tracking}em`, color: COR.texto, textTransform: 'uppercase',
      opacity: tt, transform: `translateX(${(1 - tt) * (esq ? 20 : -20)}px)`, whiteSpace: 'nowrap'}}>
      {titulo}
      {sub && <div style={{color: COR.apagado, fontWeight: 400, marginTop: 8, fontSize: 21}}>{sub}</div>}
    </div>
  </div>;
};