import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {ClipFigur, Figur} from '../baukasten/figur';
import {gang} from '../baukasten/gang';

// Prüfstand für baukasten/gang.ts: Noa und Pino gehen nach rechts, die Füße dürfen nicht rutschen.
const NOA = gang('noa', 10, 300, 1500);
const PINO = gang('pino', 10, 300, 900, 2.5);

export const GangTest: React.FC = () => {
	const f = useCurrentFrame();
	const figur = (g: typeof NOA, y: number) =>
		g.geht(f) ? (
			<ClipFigur name={`${g.figur}_C1_gehen-schleife`} start={g.clipStart} tempo={g.tempo} schleife spiegeln={g.spiegeln} x={g.x(f)} y={y} />
		) : (
			<Figur pose={`${g.figur}_A3_lachen`} x={g.x(f)} y={y} />
		);
	return (
		<AbsoluteFill style={{background: '#ffffff'}}>
			{figur(NOA, 500)}
			{figur(PINO, 950)}
		</AbsoluteFill>
	);
};
export const GANGTEST_DAUER = Math.ceil(Math.max(NOA.ende, PINO.ende)) + 20;