import React from 'react';
import {Audio, Sequence, interpolate, staticFile, useCurrentFrame} from 'remotion';
import {ClipFigur, Figur, Kamera} from '../baukasten/figur';
import {gang} from '../baukasten/gang';
import {Blende, Vignette, atmen, kamFahrt} from '../baukasten/helfer';
import {Funkeln} from '../baukasten/natur';
import {BODEN} from '../baukasten/orte';
import {Untertitel} from '../baukasten/untertitel';
import {plane} from './plan';
import {Abenddunkel, GartenAbend, Laterne, laterneInNoasHand} from './teile';

// Szene 3: Es wird dunkel. Abendgarten, rechts die Hauswand mit erleuchtetem Fenster.
// Noa knipst das Lämpchen an (kein Feuer) und singt den Laternenvers; die Laterne pendelt sanft.
// Pino tippelt zu ihr (baukasten/gang.ts, Füße rutschen nicht). Lulu steht schon an der Hauswand –
// sie geht nicht durchs Bild, weil ihr Geh-Clip kein echtes Gehen ist.

const NOA_X = 760;
const LULU_X = 1640; // rechts vom Fenster, damit Papa zu sehen ist

export const S3 = plane('s3', [
	{id: 'bild0', dauer: 3.0},
	{id: 'e1', wer: 'ERZ'},
	{id: 'klick', dauer: 1.4},
	{id: 'e2', wer: 'ERZ'},
	{id: 'p1', wer: 'PINO'},
	{id: 'v1', wer: 'NOA'},
	{id: 'v2', wer: 'NOA'},
	{id: 'v3', wer: 'NOA'},
	{id: 'v4', wer: 'NOA', pause: 0.6},
	{id: 'e3', wer: 'ERZ', pause: 0.8},
	{id: 'w1', wer: 'NOA'},
	{id: 'w2', wer: 'NOA'},
	{id: 'w3', wer: 'NOA'},
	{id: 'w4', wer: 'NOA'},
	{id: 'bild1', dauer: 1.8},
]);

export const Szene3: React.FC = () => {
	const f = useCurrentFrame();
	const {z, dauer} = S3;

	const an = z.klick.start + 12;
	const licht = interpolate(f, [an, an + 8], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
	const singt = f >= z.v1.start && f < z.w4.ende;
	const schwung = singt ? Math.sin((f - z.v1.start) * 0.09) * 7 : Math.sin(f * 0.05) * 2;
	const lat = laterneInNoasHand(NOA_X);

	// Pino kommt beim Vers dicht an Noas Stiefel (ganze Schritte, Füße bleiben am Boden)
	const PINO = gang('pino', z.v1.start + 6, 300, NOA_X - 120, 2.5);

	const kam = kamFahrt(f, [
		[0, 1000, 540, 1.0],
		[z.bild0.ende, 980, 560, 1.06],
		[z.klick.start, 760, 640, 1.55],
		[z.e2.ende, 720, 640, 1.7],
		[z.p1.start + 6, lat.x, lat.y, 2.3], // „Mein Igel leuchtet!“
		[z.p1.ende + 10, 820, 640, 1.35],
		[z.w1.start, 900, 600, 1.2],
		[dauer, 920, 600, 1.15],
	]);

	return (
		<>
			<Kamera {...kam}>
				<GartenAbend />
				<Figur pose={[[0, 'lulu_A5_blick-links'], [z.p1.start, 'lulu_A3_lachen']]} x={LULU_X} y={BODEN - 6} stauchY={atmen(f, 3, 0.006)} />
				<Figur
					pose={[
						[0, 'noa_A_laterne'],
					]}
					x={NOA_X}
					y={BODEN}
					stauchY={atmen(f, 2)}
					drehung={singt ? Math.sin((f - z.v1.start) * 0.045) * 1.5 : 0}
				/>
				<Laterne x={lat.x} y={lat.y} s={lat.s} licht={licht} schwung={schwung} stab={false} />
				<Funkeln x={lat.x} y={lat.y} start={an} dauer={30} s={0.8} />
				{PINO.geht(f) ? (
					<ClipFigur name="pino_C1_gehen-schleife" start={PINO.clipStart} tempo={PINO.tempo} schleife spiegeln={PINO.spiegeln} x={PINO.x(f)} y={BODEN} />
				) : (
					<Figur
						pose={[
							[0, 'pino_A6_blick-rechts'],
							[an, 'pino_A4_staunen'],
							[z.v1.start, 'pino_A6_blick-rechts'],
							[PINO.ende, 'pino_A3_lachen'],
						]}
						x={PINO.x(f)}
						y={BODEN}
						stauchY={atmen(f, 1)}
					/>
				)}
				<Abenddunkel licht={{x: lat.x, y: lat.y}} staerke={0.55 - 0.15 * licht} radius={380 + 260 * licht} />
			</Kamera>
			<Vignette />
			{/* Zwischenlösung bis zum gesungenen Laternenlied (Suno): Instrumental aus Folge 1 unter dem Vers */}
			<Sequence from={z.v1.start - 20} durationInFrames={z.w4.ende - z.v1.start + 60}>
				<Audio
					src={staticFile('musik/folge01/lied.mp3')}
					volume={(g) => 0.3 * Math.min(interpolate(g, [0, 20], [0, 1], {extrapolateRight: 'clamp'}), interpolate(g, [z.w4.ende - z.v1.start + 20, z.w4.ende - z.v1.start + 60], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}))}
				/>
			</Sequence>
			<Untertitel zeilen={S3.liste} />
			<Blende dauer={dauer} rein={14} raus={14} />
		</>
	);
};