// Pino: o marcador do lugar. Cai de cima, quica com overshoot, deixa uma sombra no chão e solta dois anéis de onda.
// Dentro do MapaBase usa coordenadas do mapa e mantém o tamanho na tela (`tamanho` em px); solto, usa coordenadas da tela.
import React, {useContext} from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, MapaCtx, e5, ov, seg} from '../base';

export type PinoProps = {
  x: number;
  y: number;
  /** altura do pino na tela, px (herói: 170–220) */
  tamanho?: number;
  inicio?: number;
  cor?: string;
  /** letra ou número no miolo */
  miolo?: string;
  fim?: number;
};

export const PinoGrupo: React.FC<PinoProps> = ({x, y, tamanho = 190, inicio = 0, cor = COR.magenta, miolo = '', 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 + 18)), sombra = e5(seg(f, inicio + 8, inicio + 18));
  const onda = (d: number) => e5(seg(f, inicio + 14 + d, inicio + 40 + d));
  const h = tamanho * k;
  return <g transform={`translate(${x} ${y})`}>
    {[0, 8].map((d) => <ellipse key={d} cx={0} cy={0} rx={h * 0.9 * onda(d)} ry={h * 0.34 * onda(d)} fill="none" stroke={cor} strokeWidth={h * 0.04} strokeOpacity={f >= inicio + 14 + d ? 1 - onda(d) : 0} />)}
    <ellipse cx={0} cy={0} rx={h * 0.2 * sombra} ry={h * 0.07 * sombra} fill="rgba(27,31,42,0.3)" />
    <g transform={`translate(0 ${(t - 1) * -h * 5}) scale(${h / 100})`}>
      <path d="M0 0 C -4 -10, -42 -52, -42 -78 A 42 42 0 0 1 42 -78 C 42 -52, 4 -10, 0 0 Z" transform="translate(0 0) scale(1 1)" fill={cor} stroke={COR.creme} strokeWidth={7} strokeLinejoin="round" />
      <circle cx={0} cy={-78} r={17} fill={COR.creme} />
      {miolo && <foreignObject x={-20} y={-100} width={40} height={44}><div style={{width: 40, height: 44, textAlign: 'center', fontFamily: 'sans-serif', fontWeight: 800, fontSize: 28, lineHeight: '44px', color: cor}}>{miolo}</div></foreignObject>}
    </g>
  </g>;
};

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