import React from 'react';
import {useCurrentFrame} from 'remotion';
import {Figur, Kamera} from '../baukasten/figur';
import {type DrachenLage, LIEGE_HOEHE, plumps} from '../baukasten/drachen';
import {Blende, Vignette, atmen, kamFahrt} from '../baukasten/helfer';
import {BODEN} from '../baukasten/orte';
import {Untertitel} from '../baukasten/untertitel';
import {plane} from './plan';
import {DRACHEN_IM_GRAS, LuluImWind, PLATZ, SchnurUndDrachen, WindGarten} from './teile';

// Szene 3: Plumps! Noa steht mitten auf der Wiese, aber verkehrt herum (schaut gegen den Wind nach links),
// der Drachen liegt windaufwärts vor ihr im Gras (bei Lulu). Ein Windstoß hebt ihn kurz an – plumps, zweimal. Noa ist enttäuscht;
// Pino tröstet, Lulu spürt oben den Wind. Beim „Puste mal!“ fegt eine Böe Blätter durchs Bild.

export const S3 = plane('s3', [
	{id: 'plumps', dauer: 4.2},
	{id: 'n1', wer: 'NOA'},
	{id: 'e1', wer: 'ERZ', pause: 4},
	{id: 'e2', wer: 'ERZ'},
	{id: 'p1', wer: 'PINO'},
	{id: 'l1', wer: 'LULU'},
	{id: 'e3', wer: 'ERZ', pause: 3},
	{id: 'e4', wer: 'ERZ'},
	{id: 'bild1', dauer: 1.0},
]);

export const Szene3: React.FC = () => {
	const f = useCurrentFrame();
	const {z, dauer} = S3;
	const p0 = z.plumps.start + 6;
	const halb = (z.plumps.ende - p0) / 2;
	const lage: DrachenLage = f < p0 + halb ? plumps(f, p0, halb, DRACHEN_IM_GRAS.x, BODEN) : plumps(f, p0 + halb, halb, DRACHEN_IM_GRAS.x, BODEN);
	const traurig = f >= z.n1.start && f < z.p1.ende;
	const boeen = f >= z.e3.ende && f < z.e3.frei + 20 ? 1 : 0;
	const kam = kamFahrt(f, [
		[0, 1060, 600, 1.15],
		[z.n1.start, PLATZ.noa, 640, 1.5], // Noa
		[z.e2.ende, 960, 640, 1.3],
		[z.l1.start, PLATZ.lulu - 60, 420, 1.35], // Lulu oben im Wind
		[z.e3.start, 1060, 560, 1.05],
		[dauer, 1060, 560, 1.05],
	]);
	return (
		<>
			<Kamera {...kam}>
				<WindGarten boeen={boeen} />
				<LuluImWind />
				{/* Noa schaut nach links: die Schnur läuft hinter ihr zum Drachen */}
				<SchnurUndDrachen lage={traurig ? {x: DRACHEN_IM_GRAS.x, y: BODEN - LIEGE_HOEHE, drehung: 90, liegt: true} : lage} noaX={PLATZ.noa} spiegeln schnur={!traurig} />
				<Figur pose={[[0, 'noa_A_drachenschnur'], [z.n1.start, 'noa_B1_traurig'], [z.p1.ende, 'noa_A_drachenschnur']]} x={PLATZ.noa} y={BODEN} spiegeln stauchY={atmen(f, 2)} />
				<Figur pose={[[0, 'pino_A6_blick-rechts'], [z.n1.start, 'pino_B1_traurig'], [z.p1.start, 'pino_A6_blick-rechts'], [z.e4.start, 'pino_A3_lachen']]} x={PLATZ.pino} y={BODEN} stauchY={atmen(f, 1, 0.015)} />
			</Kamera>
			<Vignette />
			<Untertitel zeilen={S3.liste} />
			<Blende dauer={dauer} rein={8} raus={8} />
		</>
	);
};