// Fundo: céu de 8 bits com nuvens de pixel em duas camadas, sol quadrado e chão de blocos que rola. Tudo anda em passos.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR, ALTURA, LARGURA, useF} from '../base';

const NUVEM = [[1, 0, 3], [0, 1, 5], [1, 2, 4]]; // [col, linha, largura] em blocos
const Nuvem: React.FC<{x: number; y: number; b: number; cor: string}> = ({x, y, b, cor}) =>
  <>{NUVEM.map(([c, l, w], i) => <div key={i} style={{position: 'absolute', left: x + c * b, top: y + l * b, width: w * b, height: b, background: cor}} />)}</>;

export const Fundo: React.FC = () => {
  const f = useF();
  const B = 36;
  const nuvens = [0, 1, 2, 3].map((i) => ({x: ((i * 520 - f * 5 + 2400) % 2100) - 300, y: 240 + i * 340 + (i % 2) * 60, perto: i % 2 === 0}));
  const chaoX = -((f * 9) % 144);
  return <AbsoluteFill style={{background: COR.ceu}}>
    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: ALTURA * 0.5, background: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 72px, transparent 72px 144px)'}} />
    <div style={{position: 'absolute', left: 760, top: 150 + Math.sin(f / 14) * 12, width: 220, height: 220, background: COR.amarelo, boxShadow: `0 0 0 ${B / 2}px ${COR.laranja}`}} />
    {nuvens.map((n, i) => <Nuvem key={i} x={n.x} y={n.y} b={n.perto ? 48 : 30} cor={n.perto ? COR.creme : 'rgba(255,241,232,0.7)'} />)}
    <div style={{position: 'absolute', left: 0, top: 1480, width: LARGURA, height: 40, background: COR.verde}} />
    <div style={{position: 'absolute', left: 0, top: 1520, width: LARGURA, height: ALTURA - 1520, background: COR.laranja}} />
    <div style={{position: 'absolute', left: chaoX, top: 1520, width: LARGURA + 288, height: ALTURA - 1520, background: `repeating-linear-gradient(90deg, ${COR.noite} 0 8px, transparent 8px 144px), repeating-linear-gradient(0deg, ${COR.noite} 0 8px, transparent 8px 72px)`, opacity: 0.55}} />
  </AbsoluteFill>;
};