import React from 'react';
import {interpolate, useCurrentFrame} from 'remotion';
import {Figur, Kamera} from '../baukasten/figur';
import {Drachen} from '../baukasten/drachen';
import {Blende, Vignette, atmen, huepfer, kamFahrt, punkt} from '../baukasten/helfer';
import {BODEN} from '../baukasten/orte';
import {Untertitel} from '../baukasten/untertitel';
import {plane} from './plan';
import {LuluImWind, PLATZ, WindGarten} from './teile';

// Szene 2: Mein Drachen. Windiger Nachmittag; Noa hält ihren roten Papierdrachen an den Seitenspitzen vor der
// Brust (Higgsfield-Pose noa_A_drachen-vorn, der Drachenkörper ist mitgemalt). Den Schwanz mit den drei
// Schleifen zeichnet Remotion an die untere Spitze – die Schleifen leuchten beim Zählen nacheinander auf.

export const S2 = plane('s2', [
	{id: 'bild0', dauer: 2.6},
	{id: 'n1', wer: 'NOA'},
	{id: 'p1', wer: 'PINO'},
	{id: 'n2', wer: 'NOA'},
	{id: 'e1', wer: 'ERZ'},
	{id: 'z1', wer: 'ERZ', pause: 1.5},
	{id: 'z2', wer: 'ERZ', pause: 1.5},
	{id: 'z3', wer: 'ERZ', pause: 1.0},
	{id: 'e2', wer: 'ERZ'},
	{id: 'bild1', dauer: 1.2},
]);

const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;

// Drachen in noa_A_drachen-vorn (Leinwand, gemessen): obere Spitze 686/336, Kreuz 686/441, untere Spitze 686/651
const OBEN = {cx: 686, cy: 336};
const KREUZ = {cx: 686, cy: 441};
const UNTEN = {cx: 686, cy: 651};

export const Szene2: React.FC = () => {
	const f = useCurrentFrame();
	const {z, dauer} = S2;
	const p = (q: typeof OBEN) => punkt('noa', PLATZ.noa, BODEN, q.cx, q.cy);
	const oben = p(OBEN);
	const unten = p(UNTEN);
	const d = p(KREUZ);
	// Remotion-Drachen genau deckungsgleich (1 = 120 px hoch, Spitze 78 px unter dem Kreuz); sichtbar ist
	// nur, was unter der unteren Spitze liegt: der Schwanz.
	const groesse = (unten.y - oben.y) / 120;
	const nurSchwanz = `polygon(0 ${unten.y - 2}px, 100% ${unten.y - 2}px, 100% 100%, 0 100%)`;
	const leuchte = (id: 'z1' | 'z2' | 'z3') => interpolate(f, [z[id].start, z[id].start + 6, z[id].frei, z[id].frei + 8], [0, 1, 1, 0.25], klemm);
	const kam = kamFahrt(f, [
		[0, 1060, 540, 1.0],
		[z.bild0.ende, 1060, 600, 1.15],
		[z.n2.ende, 1000, 560, 1.2],
		[z.e1.start + 20, d.x + 140, BODEN - 70, 1.5], // Nahaufnahme Drachen samt Schleifen im Gras zum Zählen
		[z.e2.ende, d.x + 140, BODEN - 70, 1.5],
		[dauer, 1060, 600, 1.15],
	]);
	return (
		<>
			<Kamera {...kam}>
				<WindGarten />
				<LuluImWind />
				<Figur pose={[[0, 'pino_A4_staunen'], [z.n2.start, 'pino_A3_lachen']]} x={PLATZ.pino} y={BODEN + huepfer(f, z.p1.start, 14, 10)} stauchY={atmen(f, 1, 0.015)} />
				<Figur pose="noa_A_drachen-vorn" x={PLATZ.noa} y={BODEN} />
				<div style={{position: 'absolute', inset: 0, clipPath: nurSchwanz}}>
					<Drachen x={d.x} y={unten.y - 78 * groesse} s={groesse} schwanz={72} flattern={8} boden={BODEN} leuchten={[leuchte('z1'), leuchte('z2'), leuchte('z3')]} />
				</div>
			</Kamera>
			<Vignette />
			<Untertitel zeilen={S2.liste} />
			<Blende dauer={dauer} rein={14} raus={8} />
		</>
	);
};