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

// Szene 5: Ach so! Noa hebt die Laterne hoch, jetzt fällt das Licht auf Lulu. Lulu nickt – der Schatten
// nickt mit. Pinos Stacheln legen sich, alle lachen. Der Erzähler erklärt, wie ein Schatten entsteht.

export const S5 = plane('s5', [
	{id: 'bild0', dauer: 1.6},
	{id: 'l1', wer: 'LULU'},
	{id: 'p1', wer: 'PINO'},
	{id: 'lachen', dauer: 1.6},
	{id: 'e1', wer: 'ERZ'},
	{id: 'bild1', dauer: 1.0},
]);

export const Szene5: React.FC = () => {
	const f = useCurrentFrame();
	const {z, dauer} = S5;
	const hell = interpolate(f, [8, 30], [0.55, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
	// Lulu nickt zweimal (vor „Huch!“), der Schatten macht es mit
	const nick = interpolate(f, [z.bild0.start + 18, z.bild0.ende + 12], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
	const nicken = Math.sin(nick * Math.PI * 4) * 3 * (nick > 0 && nick < 1 ? 1 : 0);
	const kam = kamFahrt(f, [
		[0, 1060, 520, 0.98],
		[z.l1.start, 1180, 560, 1.15],
		[z.p1.start, 1000, 560, 1.05],
		[dauer, 1000, 540, 1.0],
	]);
	return (
		<>
			<Wandszene
				f={f}
				kam={kam}
				laterne={{inHand: true, licht: 1, schwung: Math.sin(f * 0.07) * 4}}
				noa={{pose: [[0, 'noa_B_hocken'], [6, 'noa_A_laterne']]}}
				pino={{pose: [[0, 'pino_A4_staunen'], [z.p1.start, 'pino_A3_lachen']], x: PLATZ.noa + 90}}
				lulu={{pose: [[0, 'lulu_A4_staunen'], [z.l1.start, 'lulu_A3_lachen']], hell, drehung: nicken}}
			/>
			<Untertitel zeilen={S5.liste} />
			<Blende dauer={dauer} rein={6} raus={6} />
		</>
	);
};