import React from 'react';
import {interpolate, useCurrentFrame} from 'remotion';
import {gang} from '../baukasten/gang';
import {Blende, huepfer, kamFahrt} from '../baukasten/helfer';
import {BODEN} from '../baukasten/orte';
import {Untertitel} from '../baukasten/untertitel';
import {plane} from './plan';
import {PLATZ, Wandszene} from './wand';

// Szene 6: Jetzt bin ich der Größte! Noa stellt die Laterne ins Gras, Pino tippelt ganz nah heran.
// Sein Schatten wächst, bis er größer ist als Lulus. Lulu verbeugt sich vor dem großen Igel-Schatten.

export const S6 = plane('s6', [
	{id: 'p1', wer: 'PINO'},
	{id: 'n1', wer: 'NOA'},
	{id: 'hinstellen', dauer: 1.6},
	{id: 'e1', wer: 'ERZ', pause: 3},
	{id: 'wachsen', dauer: 2.4},
	{id: 'e2', wer: 'ERZ'},
	{id: 'p2', wer: 'PINO'},
	{id: 'verbeugen', dauer: 1.6},
	{id: 'l1', wer: 'LULU'},
	{id: 'p3', wer: 'PINO'},
	{id: 'bild1', dauer: 1.6},
]);

const LATERNE = {x: 1010, y: PLATZ.laterneBoden.y};

export const Szene6: React.FC = () => {
	const f = useCurrentFrame();
	const {z, dauer} = S6;
	const steht = f >= z.hinstellen.start + 8;
	// Pino geht während der Frage schon los und steht beim Wachsen dicht an der Laterne
	const PINO = gang('pino', z.e1.start + 20, PLATZ.noa + 90, LATERNE.x - 70, 2.5);
	const wachsen = interpolate(f, [z.wachsen.start, z.wachsen.ende], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
	const kPino = steht ? 1.25 + wachsen * 6.2 : undefined;
	const kam = kamFahrt(f, [
		[0, 1000, 560, 1.1],
		[z.hinstellen.start, 900, 640, 1.25],
		[z.wachsen.start, 980, 520, 1.0],
		[z.p2.start, 1000, 520, 1.0],
		[z.verbeugen.start, 1120, 560, 1.12],
		[dauer, 1040, 540, 1.02],
	]);
	return (
		<>
			<Wandszene
				f={f}
				kam={kam}
				laterne={steht ? {inHand: false, licht: 1, x: LATERNE.x, y: LATERNE.y} : {inHand: true, licht: 1, schwung: Math.sin(f * 0.06) * 3}}
				noa={{pose: [[0, 'noa_A_laterne'], [z.hinstellen.start + 8, 'noa_B_hocken'], [z.p2.start, 'noa_A3_lachen']]}}
				pino={{
					pose: [[0, 'pino_B1_traurig'], [z.n1.start, 'pino_A4_staunen'], [z.e2.start, 'pino_A4_staunen'], [z.p2.start, 'pino_A3_lachen']],
					x: PINO.x(f),
					gang: PINO,
					k: kPino,
					y: BODEN + huepfer(f, z.p3.start, 18, 12) + huepfer(f, z.p3.start + 16, 14, 11),
					drehung: f >= z.p3.start ? Math.sin(f * 1.4) * 2 : 0, // Stacheln zittern vor Freude
				}}
				lulu={{pose: [[0, 'lulu_A3_lachen'], [z.verbeugen.start, 'lulu_A_hals-unten'], [z.p3.start, 'lulu_A3_lachen']]}}
			/>
			<Untertitel zeilen={S6.liste} />
			<Blende dauer={dauer} rein={6} raus={6} />
		</>
	);
};