// MapaBase: o mapa da cidade desenhado pelo kit (rio, parques, quadras, ruas brancas, avenidas amarelas, nomes de rua),
// numa janela de 880 px com borda branca. A câmera do mapa anda por chaves `foco` [quadro, cx, cy, zoom, giro]; os pinos, as
// rotas e os chips entram por props e ficam do mesmo tamanho na tela, qualquer que seja o zoom. Herói das cenas de mapa.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, MONO, MapaCtx, chavesN, e5, ov, seg} from '../base';
import {PinoGrupo, PinoProps} from '../formas/Pino';
import {RotaGrupo, RotaAnimadaProps} from '../formas/RotaAnimada';
import {ChipGrupo, ChipTempoProps} from '../formas/ChipTempo';

export type MapaBaseProps = {
  /** chaves da câmera: [quadro, cx, cy, zoom, giro°] em coordenadas do mapa (2000 × 2400); zoom 1 mostra o mapa quase todo */
  foco: number[][];
  pinos?: PinoProps[];
  rotas?: RotaAnimadaProps[];
  chips?: ChipTempoProps[];
  inicio?: number;
  /** centro vertical da janela, px */
  y: number;
  altura?: number;
  fim?: number;
};

const W = 2000, H = 2400, JW = 880;
const VERT = Array.from({length: 8}, (_, k) => 150 + k * 260), HORZ = Array.from({length: 9}, (_, j) => 120 + j * 240);
const NOMES = [['Av. das Flores', 150, 1330, 0], ['R. do Sol', 150 + 260 * 3 - 30, 520, 90], ['R. da Lagoa', 700, 1090, 0], ['Av. Central', 1560, 1900, 90]] as const;

const Cidade: React.FC = React.memo(() => <g>
  <rect x={-200} y={-200} width={W + 400} height={H + 400} fill={COR.terra} />
  {VERT.slice(0, -1).flatMap((x, k) => HORZ.slice(0, -1).map((y, j) => ((k * 7 + j * 3) % 5 === 0) ? null : <rect key={`${k}-${j}`} x={x + 30} y={y + 30} width={200} height={180} rx={18} fill={(k + j) % 2 ? '#EAE3D3' : '#EDE6D6'} />))}
  <path d="M-200 520 C 400 980, 880 420, 1300 1040 S 2100 1500, 2300 2000" fill="none" stroke={COR.agua} strokeWidth={170} strokeLinecap="round" />
  <path d="M-200 520 C 400 980, 880 420, 1300 1040 S 2100 1500, 2300 2000" fill="none" stroke="#fff" strokeOpacity={0.5} strokeWidth={10} strokeDasharray="30 50" />
  <rect x={1040} y={1710} width={440} height={400} rx={60} fill={COR.parque} />
  <rect x={180} y={1800} width={380} height={330} rx={60} fill={COR.parque} />
  <rect x={1480} y={170} width={360} height={320} rx={60} fill={COR.parque} />
  {[[1180, 1860], [1300, 1980], [1380, 1790], [310, 1930], [410, 2030], [1620, 300], [1700, 400]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r={34} fill="#B7D9A0" />)}
  {[...VERT.map((x) => ({x1: x, y1: -200, x2: x, y2: H + 200})), ...HORZ.map((y) => ({x1: -200, y1: y, x2: W + 200, y2: y}))].map((l, i) => <line key={`b${i}`} {...l} stroke={COR.ruaBorda} strokeWidth={42} />)}
  <line x1={-200} y1={-200} x2={W + 200} y2={H + 200} stroke={COR.avenidaBorda} strokeWidth={70} opacity={0} />
  {[...VERT.map((x) => ({x1: x, y1: -200, x2: x, y2: H + 200, a: false})), ...HORZ.map((y) => ({x1: -200, y1: y, x2: W + 200, y2: y, a: false}))].map((l, i) => <line key={`r${i}`} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} stroke={COR.rua} strokeWidth={30} />)}
  {[1330, 1090].map((y) => <line key={y} x1={-200} y1={y} x2={W + 200} y2={y} stroke={COR.avenidaBorda} strokeWidth={66} />)}
  {[1330, 1090].map((y) => <line key={`a${y}`} x1={-200} y1={y} x2={W + 200} y2={y} stroke={COR.avenida} strokeWidth={50} />)}
  {NOMES.map(([n, x, y, r]) => <text key={n} x={x} y={y + 9} transform={`rotate(${r} ${x} ${y})`} fontFamily={MONO} fontWeight={500} fontSize={30} fill={COR.tinta} fillOpacity={0.55}>{n}</text>)}
</g>);

export const MapaBase: React.FC<MapaBaseProps> = ({foco, pinos = [], rotas = [], chips = [], inicio = 0, y, altura = 1100, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 14) return null;
  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 12));
  const [cx, cy, z, giro = 0] = chavesN(f - inicio, foco);
  const s = 0.5 * z;
  return <div style={{position: 'absolute', left: 100, top: y - altura / 2, width: JW, height: altura, borderRadius: 48, overflow: 'hidden', border: '12px solid #fff', boxSizing: 'border-box', boxShadow: '0 50px 90px rgba(80,0,30,.4)', background: COR.terra, transform: `translateY(${(1 - t) * 1100 - sai * 1100}px) rotate(${(1 - t) * 5}deg) scale(${0.92 + 0.08 * t})`}}>
    <svg width={JW - 24} height={altura - 24} style={{display: 'block'}}>
      <g transform={`translate(${(JW - 24) / 2} ${(altura - 24) / 2}) rotate(${giro}) scale(${s}) translate(${-cx} ${-cy})`}>
        <MapaCtx.Provider value={{s}}>
          <Cidade />
          {rotas.map((r, i) => <RotaGrupo key={i} {...r} inicio={(r.inicio ?? 0) + inicio} />)}
          {pinos.map((p, i) => <PinoGrupo key={i} {...p} inicio={(p.inicio ?? 0) + inicio} />)}
          {chips.map((c, i) => <ChipGrupo key={i} {...c} inicio={(c.inicio ?? 0) + inicio} />)}
        </MapaCtx.Provider>
      </g>
    </svg>
  </div>;
};