// Sprite: personagem ou item em pixel art desenhado por grade de texto (cada letra = uma cor da paleta de 8 bits).
// Pula, flutua ou gira em passos. Props: nome, x, y (centro), escala (px por pixel do sprite), movimento, inicio.
import React from 'react';
import {COR, mola, seg, useF} from '../base';

const PAL: Record<string, string> = {k: COR.noite, w: COR.creme, y: COR.amarelo, o: COR.laranja, m: COR.magenta, b: COR.azul, g: COR.verde, p: COR.roxo, s: COR.cinza};
export const SPRITES: Record<string, string[]> = {
  bloco: ['..kkkkkkkk..', '.kyyyyyyyyk.', 'kyyyyyyyyyyk', 'kyykkyykkyyk', 'kyykwyykwyyk', 'kyyyyyyyyyyk', 'kyoyyyyyyoyk', 'kyyykkkkyyyk', 'kyyyyyyyyyyk', '.kyyyyyyyyk.', '.kkk....kkk.', 'kkkkk..kkkkk'],
  moeda: ['...kkkk...', '..kyyyyk..', '.kyywyyok.', 'kyywyyyyok', 'kywyyooyok', 'kywyyooyok', 'kyyyyyyyok', '.kyyyyook.', '..kooook..', '...kkkk...'],
  coracao: ['.kkk...kkk.', 'kmmmk.kmmmk', 'kmwmmkmmmmk', 'kmwmmmmmmmk', 'kmmmmmmmmmk', '.kmmmmmmmk.', '..kmmmmmk..', '...kmmmk...', '....kmk....', '.....k.....'],
  estrela: ['.....k.....', '....kyk....', '....kyk....', '...kywyk...', 'kkkkywyykkk', 'kyyywyyyyyk', '.kyyyyyyyk.', '..kyyyyyk..', '..kyykyyk..', '.kyykkkyyk.', '.kkk...kkk.'],
  foguete: ['....k....', '...kwk...', '..kwwwk..', '..kwbwk..', '..kwwwk..', '..kwwwk..', '.kwwwwwk.', '.kwwwwwk.', 'kmkwwwkmk', 'kmk...kmk', '.k.kyk.k.', '...kyk...', '....k....'],
  cogumelo: ['...kkkkkk...', '..kmmwwmmk..', '.kmmwwwwmmk.', 'kmmmwwwwmmmk', 'kwwmmmmmmwwk', 'kwwmmmmmmwwk', 'kkkkwwwwkkkk', '...kwkkwk...', '...kwwwwk...', '....kkkk....'],
};
export type SpriteProps = {
  nome?: keyof typeof SPRITES | string; x?: number; y?: number; escala?: number; inicio?: number;
  movimento?: 'pular' | 'flutuar' | 'parado'; espelhar?: boolean; /** troca a cor 'y' por outra (ex.: estrela verde) */ cor?: string; sombra?: boolean;
};
export const Sprite: React.FC<SpriteProps> = ({nome = 'bloco', x = 540, y = 760, escala = 40, inicio = 0, movimento = 'pular', espelhar = false, cor, sombra = true}) => {
  const f = useF() - inicio;
  const g = SPRITES[nome] ?? SPRITES.bloco;
  const w = g[0].length, h = g.length;
  const nasce = mola(seg(f, 0, 9));
  const t = Math.max(0, f - 9);
  const pulo = movimento === 'pular' ? Math.abs(Math.sin(t / 7.2)) * escala * 3.2 : movimento === 'flutuar' ? Math.sin(t / 8) * escala * 0.8 : 0;
  const esc = Math.max(0.01, nasce);
  const rects: React.ReactNode[] = [];
  g.forEach((lin, j) => [...lin].forEach((ch, i) => { if (ch !== '.') rects.push(<rect key={`${i}-${j}`} x={i} y={j} width={1.02} height={1.02} fill={ch === 'y' && cor ? cor : PAL[ch]} />); }));
  return <div style={{position: 'absolute', left: x - (w * escala) / 2, top: y - (h * escala) / 2 - pulo, width: w * escala, height: h * escala, transform: `scale(${esc * (espelhar ? -1 : 1)}, ${esc * (1 + (movimento === 'pular' ? Math.max(0, 0.12 - pulo / (escala * 12)) : 0))})`, transformOrigin: '50% 100%'}}>
    {sombra && <div style={{position: 'absolute', left: '10%', right: '10%', bottom: -escala * 0.8 + pulo, height: escala * 0.6, background: 'rgba(29,43,83,0.35)'}} />}
    <svg viewBox={`0 0 ${w} ${h}`} width={w * escala} height={h * escala} shapeRendering="crispEdges">{rects}</svg>
  </div>;
};