// RotaAnimada: a rota traçada ponto a ponto (borda branca + linha magenta de 22 px na tela) com uma bolinha que corre na frente.
// Dentro do MapaBase usa coordenadas do mapa; solta, usa coordenadas da tela. `pontos` é a lista de [x, y] das esquinas.
import React, {useContext} from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, MapaCtx, e5, seg} from '../base';

export type RotaAnimadaProps = {
  pontos: [number, number][];
  inicio?: number;
  /** quadros para percorrer a rota inteira */
  duracao?: number;
  cor?: string;
  fim?: number;
};

export const RotaGrupo: React.FC<RotaAnimadaProps> = ({pontos, inicio = 0, duracao = 40, cor = COR.magenta, fim = 1e9}) => {
  const f = useCurrentFrame();
  const ctx = useContext(MapaCtx);
  if (f < inicio - 1 || f > fim + 10) return null;
  const k = ctx ? 1 / ctx.s : 1, p = e5(seg(f, inicio, inicio + duracao));
  const seg_ = pontos.slice(1).map((b, i) => Math.hypot(b[0] - pontos[i][0], b[1] - pontos[i][1]));
  const total = seg_.reduce((a, b) => a + b, 0);
  let alvo = total * p, ponto: [number, number] = pontos[0];
  const feitos: [number, number][] = [pontos[0]];
  for (let i = 0; i < seg_.length; i++) {
    if (alvo >= seg_[i]) {alvo -= seg_[i]; feitos.push(pontos[i + 1]); ponto = pontos[i + 1];}
    else {const t = alvo / seg_[i]; ponto = [pontos[i][0] + (pontos[i + 1][0] - pontos[i][0]) * t, pontos[i][1] + (pontos[i + 1][1] - pontos[i][1]) * t]; feitos.push(ponto); break;}
  }
  const d = feitos.map((q, i) => `${i ? 'L' : 'M'}${q[0]} ${q[1]}`).join(' ');
  return <g>
    <path d={d} fill="none" stroke="#fff" strokeWidth={34 * k} strokeLinecap="round" strokeLinejoin="round" />
    <path d={d} fill="none" stroke={cor} strokeWidth={20 * k} strokeLinecap="round" strokeLinejoin="round" />
    <circle cx={ponto[0]} cy={ponto[1]} r={26 * k} fill="#fff" stroke={cor} strokeWidth={10 * k} />
    <circle cx={pontos[0][0]} cy={pontos[0][1]} r={20 * k} fill="#fff" stroke={COR.tinta} strokeWidth={9 * k} />
  </g>;
};

export const RotaAnimada: React.FC<RotaAnimadaProps> = (p) => <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}><RotaGrupo {...p} /></svg>;