// Cursor: a mão que faz as coisas acontecerem. Anda entre `pontos` com curva suave (sem pular),
// e em cada quadro de `cliques` afunda (escala 0.82) e solta um anel que se abre. Todo clique causa algo:
// ponha o clique 2 quadros antes do efeito no elemento (chave, menu, botão). Coordenadas em px da tela.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, e3, seg} from '../base';

export type PontoCursor = {em: number; x: number; y: number};
export type CursorProps = {pontos: PontoCursor[]; cliques?: number[]; inicio?: number; fim?: number; mao?: boolean; tamanho?: number};

export const Cursor: React.FC<CursorProps> = ({pontos, cliques = [], inicio, fim, mao = true, tamanho = 46}) => {
  const f = useCurrentFrame();
  const ps = [...pontos].sort((a, b) => a.em - b.em);
  if (!ps.length) return null;
  const ini = inicio ?? ps[0].em - 6;
  let x = ps[0].x, y = ps[0].y;
  for (let i = 0; i < ps.length - 1; i++) if (f >= ps[i].em) {
    const t = e3(seg(f, ps[i].em, ps[i + 1].em));
    x = ps[i].x + (ps[i + 1].x - ps[i].x) * t; y = ps[i].y + (ps[i + 1].y - ps[i].y) * t;
  }
  const op = seg(f, ini, ini + 6) * (fim !== undefined ? 1 - seg(f, fim, fim + 6) : 1);
  let aperto = 1;
  const aneis: React.ReactNode[] = [];
  cliques.forEach((c, i) => {
    aperto -= 0.18 * Math.sin(Math.PI * seg(f, c, c + 7));
    const r = seg(f, c, c + 14);
    if (r > 0 && r < 1) aneis.push(<div key={i} style={{position: 'absolute', left: -28 - r * 20, top: -28 - r * 20, width: 56 + r * 40, height: 56 + r * 40,
      borderRadius: '50%', border: `2.5px solid ${COR.azul}`, opacity: (1 - r) * 0.6}} />);
  });
  if (op <= 0) return null;
  return <div style={{position: 'absolute', left: x, top: y, opacity: op, zIndex: 10}}>
    {aneis}
    <svg width={tamanho} height={tamanho} viewBox="0 0 32 32" style={{position: 'absolute', left: mao ? -12 : -4, top: -4, transform: `scale(${aperto})`, transformOrigin: '30% 10%',
      filter: 'drop-shadow(0 3px 4px rgba(0,0,0,0.25))'}}>
      {mao
        ? <path d="M12 3.5c1.2 0 2 .9 2 2v8.2l.6-.1V11c0-1.1.8-1.9 1.9-1.9s1.9.8 1.9 1.9v2.5l.5-.1c.2-1 .9-1.6 1.8-1.6 1.1 0 1.9.8 1.9 1.9v1.6l.4-.1c.3-.7.9-1.1 1.7-1.1 1 0 1.8.8 1.8 1.9v5.4c0 4.2-3.1 7.1-7.4 7.1h-1.7c-2.3 0-4.1-1-5.4-2.8L6.6 19.4c-.6-.9-.4-2.1.5-2.7.8-.5 1.9-.4 2.5.4l.4.5V5.5c0-1.1.9-2 2-2z" fill="#fff" stroke="#1E1C19" strokeWidth="1.5" strokeLinejoin="round" />
        : <path d="M5 3l20 11.5-8.6 1.9L12 25z" fill="#1E1C19" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round" />}
    </svg>
  </div>;
};