// Montanhas: duas cadeias de montanhas de arame ancoradas no horizonte (y = 1180): a de trás em ciano (fundo roxo), a da
// frente em magenta (fundo noite). Sobem 300 px com sobra em 18 quadros e derivam em paralaxe (0,15 e 0,3 px por quadro).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, eb} from '../base';
import {HORIZONTE} from '../texturas/Fundo';

const PONTOS_T = '0,300 90,220 170,270 260,150 360,260 450,200 560,300 650,190 760,280 850,170 960,270 1060,210 1160,300 1300,230 1500,300';
const PONTOS_F = '0,300 110,240 200,290 300,210 400,300 520,250 620,300 700,230 800,300 930,240 1040,300 1160,260 1300,300 1500,300';

export type MontanhasProps = {inicio?: number; fim?: number};

export const Montanhas: React.FC<MontanhasProps> = ({inicio = 0, fim}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || (fim !== undefined && f >= fim)) return null;
  const p = eb(t / 18, 1.3);
  const camada = (pontos: string, fundo: string, borda: string, v: number, k: string) => <svg key={k} viewBox="0 0 1500 300" style={{position: 'absolute', left: -210 - t * v, top: HORIZONTE - 300, width: 1500, height: 300, overflow: 'visible'}}>
    <polygon points={pontos} fill={fundo} stroke={borda} strokeWidth="5" strokeLinejoin="round" />
  </svg>;
  return <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, overflow: 'hidden'}}>
    <div style={{position: 'absolute', inset: 0, transform: `translateY(${(1 - p) * 300}px)`}}>
      {camada(PONTOS_T, COR.roxo, COR.ciano, 0.15, 't')}
      {camada(PONTOS_F, COR.noite, COR.magenta, 0.3, 'f')}
    </div>
  </div>;
};