// ChipTempo: pílula escura com o tempo do trajeto ("6 min a pé") presa a um ponto do mapa, que pula com overshoot.
// Dentro do MapaBase usa coordenadas do mapa e mantém o tamanho na tela; solta, usa coordenadas da tela.
import React, {useContext} from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, MapaCtx, ov, seg} from '../base';

export type ChipTempoProps = {
  texto: string;
  x: number;
  y: number;
  inicio?: number;
  fim?: number;
};

export const ChipGrupo: React.FC<ChipTempoProps> = ({texto, x, y, inicio = 0, 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, t = ov(seg(f, inicio, inicio + 14));
  const w = texto.length * 36 + 90;
  return <g transform={`translate(${x} ${y}) scale(${k * Math.max(0, t)})`}>
    <rect x={-w / 2} y={-62} width={w} height={104} rx={52} fill={COR.tinta} stroke="#fff" strokeWidth={8} />
    <path d="M-14 42 L0 66 L14 42 Z" fill={COR.tinta} />
    <foreignObject x={-w / 2} y={-62} width={w} height={104}><div style={{width: w, height: 104, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 54, color: '#fff', letterSpacing: '-0.02em', whiteSpace: 'nowrap'}}>{texto}</div></foreignObject>
  </g>;
};

/** Chip solto na tela (coordenadas da tela). */
export const ChipTempo: React.FC<ChipTempoProps> = (p) => <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}><ChipGrupo {...p} /></svg>;