import React from 'react';
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
import {Figur, NOA_HOEHE} from '../baukasten/figur';
import {Drachen, type DrachenLage, LIEGE_HOEHE, drachenHalt, pendeln, plumps, steigen, trudeln} from '../baukasten/drachen';
import {Drachenschnur, spulenPunkt} from '../baukasten/drachenschnur';

// Prüfszene Drachen (14 s): Noa hält die Spule; der Drachen liegt im Gras, plumpst,
// steigt, tanzt, trudelt zurück. Oben links ein zweiter Drachen zum Zählen der Schleifen.
const BODEN = 900;
const klemm = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;

export const DrachenschnurTest: React.FC = () => {
	const f = useCurrentFrame();
	const noa = {x: 420, y: BODEN, hoehe: NOA_HOEHE};
	const himmel = {x: 1150, y: 230};

	let lage: DrachenLage;
	if (f < 100) lage = plumps(f, 30, 60, 980, BODEN);
	else if (f < 300) lage = steigen(f, 100, 120, {x: 980, y: BODEN - LIEGE_HOEHE}, himmel, 90);
	else {
		const ab = pendeln(300, himmel);
		lage = trudeln(f, 300, 80, ab, BODEN);
	}
	// Wind von links: Schwanz weht nach rechts, am Boden kaum
	const schwanz = interpolate(lage.y, [300, BODEN - 120], [30, 5], klemm);

	// Zählen: Schleifen leuchten nacheinander auf
	const zaehl = (i: number) => interpolate(f % 120, [i * 30 + 10, i * 30 + 18, i * 30 + 34, i * 30 + 44], [0, 1, 1, 0], klemm);

	return (
		<AbsoluteFill style={{background: '#f4ead8'}}>
			<div style={{position: 'absolute', left: 0, top: BODEN - 10, width: 1920, height: 200, background: '#a9c27a'}} />
			<Drachen x={260} y={260} s={1.3} leuchten={[zaehl(0), zaehl(1), zaehl(2)]} schwanz={8} flattern={8} />
			<Figur pose="noa_A_drachenschnur" {...noa} />
			<Drachen {...lage} schwanz={schwanz} flattern={lage.liegt ? 0 : 14} boden={BODEN} />
			<Drachenschnur
				von={spulenPunkt(noa.x, noa.y, noa.hoehe)}
				nach={drachenHalt(lage.x, lage.y, 1, lage.drehung)}
				durchhang={lage.y > BODEN - 200 ? 0.12 : 0.05}
			/>
		</AbsoluteFill>
	);
};